请使用以下CSS属性水平和垂直居中对齐元素。这对我来说很有效。

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
}

请使用以下CSS属性水平和垂直居中对齐元素。这对我来说很有效。

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
}

最好和最灵活的方式

这个演示的主要技巧是，在元素从上到下的正常流中，因此margin-top: auto被设置为零。然而，绝对定位元素对于自由空间的分布具有相同的作用，并且类似地可以在指定的顶部和底部垂直居中(在IE7中不起作用)。

这个技巧适用于任何大小的div。

div { 宽度:100 px; 身高:100 px; 背景颜色:红色; 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; 保证金:汽车; ｝ < div > < / div >

是浏览器支持的，使用翻译功能强大。

position: absolute;
background-color: red;

width: 70%;     
height: 30%; 

/* The translate % is relative to the size of the div and not the container*/ 
/* 21.42% = ( (100%-70%/2) / 0.7 ) */
/* 116.666% = ( (100%-30%/2) / 0.3 ) */
transform: translate3d( 21.42%, 116.666%, 0);

这是最好的代码，以中心的div机器人水平和垂直

div ｛ 位置:绝对的; 上图:50%; 左:50%; 变换:翻译(-50%,-50%); ｝

position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

解释:

给它一个绝对定位(父元素应该有相对定位)。然后，左上角被移动到中心。因为你还不知道宽度/高度，所以你使用css transform来转换相对于中间的位置。平移(-50%，-50%)会将左上角的x和y位置降低50%的宽度和高度。