一.位置要素

第一个:通过位置转换

答:同时水平居中和垂直居中

.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}

b:水平居中

.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; left: 50%; transform: translateX(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}

c:垂直居中

.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; transform: translateY(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}

第二:通过持仓保证金。

答:同时水平居中和垂直居中

.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; margin-top: -50px; left: 50%; margin-left: -50px; height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}

b:水平居中

1 .wrapper { 2 position: relative; 3 width: 300px; 4 height: 300px; 5 border: solid 2px red; 6 border-radius: 5px; 7 } 8 9 .wrapper .content{10 position: absolute;11 left: 50%;12 margin-left: -50px;13 height: 100px;14 width: 100px;15 border: solid 2px blue;16 border-radius: 5px;17 }

c:垂直居中

.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px;}.wrapper .content{ position: absolute; top: 50%; margin-top: -50px; height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px;}

二。元素的内部信息

第一个:元素内容没有标记，只有内容，因此将高度设置为垂直行高和水平对齐文本:居中就足够了。

.wrapper{ height: 50px; line-height: 50px; text-align: center; }

第二:元素内部的元素居中，设置如下:

.wrapper-table{ display: table-cell; height: 100px; width: 100px; vertical-align: middle; text-align: center; border: solid 2px yellow;}.wrapper-table .wrapper-table-cell{ border: solid 2px #009900;}

居中 垂直 水平 元素 第一个