HTML で要素を中央揃えにするときは何に注意する必要がありますか?

.first{ width: 300px; height: 100px; background-color: black; color: white; text-align: center; margin: 0 auto; //针对块级元素 }

 不使用定位（1） 

.second{ width: 300px; height: 100px; background-color: green; } .s_child{ width: 150px; line-height: 100px; } 
 
 不使用定位（2） 
 

.dw_one{ width: 600px; height: 300px; position: absolute; background: black; } .dw_one_child{ background: white; position: relative; width: 50px; height: 50px; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; } 
 
 a 
 

.wrapper{ width: 600px; height: 600px; } .dw_two{ width: 100%; height: 100%; position: absolute; background: black; } .dw_two_child{ background: white; position: relative; top: 50%; left: 50%; width: 100px; height: 100px; transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); } 
 
 
 a