居中：
定寬高適用
position:absolute;
top:50%;
left:50%;
margin-left:-50px;/*子元素寬度的一半的負值*/
margin-top:-50px;/*子元素寬度的一半的負值*/
//缺點是需要知道子元素的寬度
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
//減去寬度的一半
position:absolute;
top:calc(50%-50px);
left:calc(50%-50px);
absolute+transform
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//設定為行內元素，text-align:center;
//vertical-align:middle;
//display:inline-block;
//居中
.first
.second
.thrid
.wp
.box
display:flex;
justify-content:center;
align-items:center;
display:grid;//網格
align-self:center;
justify-self:center;
CSS基礎 居中的方式總結
利用text align center可以實現在塊級元素內部的內聯元素水平居中。此方法對內聯元素 inline 內聯塊 inline block 內聯表 inline table inline flex 元素水平居中都有效。核心 center text 複製 通過把固定寬度塊級元素的margin l...
css居中控制 水平居中 垂直居中
ul li橫排 ul li.container container ul.container listyle container container ul.container listyle 水平居中 1.如果被設定的元素是行內元素 text img 給父元素設定text align center即...
css 垂直居中
先膜拜一下鏈結裡的人。1.這個方法把一些 div 的顯示方式設定為 因此我們可以使用 的 vertical align property 屬性。divid divid cell divclass content content goes herediv div div cell 2.這個方法使用絕對...