鲁达 白色背景蓝色屋顶的小房子A small house with blue roof on a
实现元素水平垂直居中的方式：
- 利用定位+margin:auto
- 利用定位+margin:负值
- 利用定位+transform
- table布局
- flex布局
- grid布局
1-利用定位+margin:auto
<style> .father{ width:500px; height:300px; border:1px solid #0a3b98; position: relative; } .son{ width:100px; height:40px; background: #f0a238; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; } </style> <div class="father"> <div class="son"></div> </div>2-利用定位+margin:负值
<style> .father { position: relative; width: 200px; height: 200px; background: skyblue; } .son { position: absolute; top: 50%; left: 50%; margin-left:-50px; margin-top:-50px; width: 100px; height: 100px; background: red; } </style> <div class="father"> <div class="son"></div> </div>3-利用定位+transform
<style> .father { position: relative; width: 200px; height: 200px; background: skyblue; } .son { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; background: red; } </style> <div class="father"> <div class="son"></div> </div>4-table布局
<style> .father { display: table-cell; width: 200px; height: 200px; background: skyblue; vertical-align: middle; text-align: center; } .son { display: inline-block; width: 100px; height: 100px; background: red; } </style> <div class="father"> <div class="son"></div> </div>5-flex弹性布局
<style> .father { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background: skyblue; } .son { width: 100px; height: 100px; background: red; } </style> <div class="father"> <div class="son"></div> </div>6-grid网格布局
<style> .father { display: grid; align-items:center; justify-content: center; width: 200px; height: 200px; background: skyblue; } .son { width: 10px; height: 10px; border: 1px solid red } </style> <div class="father"> <div class="son"></div> </div>7-总结
根据元素标签的性质，可以分为：
- 内联元素居中布局
- 块级元素居中布局
内联元素居中布局
水平居中
- 行内元素可设置：text-align: center
- flex布局设置父元素：display: flex; justify-content: center
垂直居中
- 单行文本父元素确认高度：height === line-height
- 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle
块级元素居中布局
水平居中
- 定宽: margin: 0 auto
- 绝对定位+left:50%+margin:负自身一半
垂直居中
- position: absolute设置left、top、margin-left、margin-top(定高)
- display: table-cell
- transform: translate(x, y)
- flex(不定高，不定宽)
- grid(不定高，不定宽)，兼容性相对比较差