css之DOM元素左右垂直居中 css之DOM元素左右垂直居中

【css之DOM元素左右垂直居中】对于DOM居中大家都不陌生，几乎开发pc或者移动端多会遇到这个问题，但是css对DOM居中是有很多种方法的，下面我来总结下。
1.第一种情况是父级高度宽度不确定

//display:flex 内容#box{ width: 300px; height: 300px; background: #999; display: flex; justify-content:center; align-items:Center; } #inner{ width: 100px; height: 100px; background:green; }

文章图片
方法一浏览器效果

//通过定位子级，宽高和top left 设置百分比等于100% 内容2#box{ width: 300px; height: 300px; background: #999; text-align: center; position: relative; } #inner{ position: absolute; top: 30%; left: 30%; width: 40%; height: 40%; background:green; }

文章图片
方法二浏览器效果 2.第二种情况是父级宽度高度确定

//利用定位加css3 transform内容#box{ width: 300px; height: 300px; background: #999; position: relative; } #inner{ position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background:red; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); }

文章图片
方法一浏览器显示效果

//绝对定位和负边距方法二#box{ width: 300px; height: 300px; background: #999; position: relative; }#inner{ position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background:red; margin-top: -50px; //自己高度的的一半 margin-left: -50px; //自己宽度的一半 text-align: center; }

文章图片
方法二浏览器效果

//table-cell 方法三#box{ width: 300px; height: 300px; background: #999; display: table-cell; vertical-align: middle; text-align: center; } #inner{ margin: 0 auto; width: 100px; height: 100px; background:red; text-align: center; }