css实现元素水平垂直居中的五种方法

css实现元素水平垂直居中的五种方法

html内容

<div class="wrapper"> <div class="box"></div> </div>

确定了元素宽高 有三种方法 第一种方法：

.box { position:absolute; top:50%; left:50%; margin-top:-100px;/*减去自身高度的一半*/ margin-left:-100px;/*减去自身宽度的一半*/ }

第二种方法：

.box{ position:absolute; top:calc(50% - 100px);/*减去自身高度的一半*/ left:calc(50% - 100px);/*减去自身宽度的一半*/ }

第三种方法：

.box{ position:absolute; margin:auto; top:0; left:0; right:0; bottom:0; }

不确定元素的宽高 有两种方法 第一种方法：

.box { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }

第二种方法：

.wrapper { display:flex; justify-content:center; align-items:center; height:200px; }