css 实现垂直水平居中常用方法

html

<div class="outer"> <div class="inner"></div></div>

基本样式

.outer { background: #ddd; width: 500px; height: 500px;}.inner { width: 100px; height: 100px; background: red;}

一、宽高不固定

1.display: flex

.outer { display: flex; align-items: center; justify-content: center; }

2.absolute + transform

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

3.absolute + margin: auto

.outer { position: relative}.inner { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;}

4.display: table-cell

.outer { display: table-cell; vertical-align: middle;}.inner { margin: auto;}

二、宽高固定

1.text-align + display: inline-block + vertical-align: middle

.outer { text-align: center;}.outer::after { content: ‘‘; display: inline-block; vertical-align: middle; height: 500px;}.inner { vertical-align: middle; display: inline-block;}

2.absolute + top + left + margin-top + margin-left

.outer { position: relative;}.inner { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}

 

 

参考:https://github.com/louzhedong/blog/issues/2

 

相关文章