1.text-align:center
控制行内元素和行内块水平居中
2.line-height
控制单行文字垂直居中
3.margin:0 auto
控制一个具体宽度的块级元素水平居中
4.控制一个绝对定位元素的水平垂直居中
<style> .fa{ width: 400px; height: 400px; border: 1px solid #000; position: relative; } .so{ width: 100px; height: 100px; border: 1px solid #000; position:absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) } </style> <div class="fa"> <div class="so"></div> </div>
5.background-position:center center;
控制背景图片水平垂直居中
6.通过display: table-cell; vertical-align:middle;属性控制图片或者块级元素垂直水平居中
图片水平垂直居中于盒子中:
<style> .box{ width: 500px; height: 500px; border: 1px solid #000; text-align: center; display: table-cell; vertical-align:middle; } img{ border: 1px solid #000; width: 200px; height: 200px; } </style> <div class="box"> <img src="./xxx.jpg" alt=""> </div>
块级元素垂直水平居中
<style> .fa{ width: 600px; height:600px; border: 1px solid #000; display: table-cell; vertical-align:middle; } .so{ border: 1px solid #000; width: 200px; height: 200px; margin:0 auto; } </style> <div class="fa"> <div class="so"></div> </div>
7.通过弹性盒子控制img或者块级元素水平垂直居中
图片在盒子中垂直水平居中:
<style> .box{ width: 800px; height: 800px; border: 1px solid #000; display: flex; justify-content: center; align-items: center; } img{ border: 1px solid #000; width: 200px; height: 200px; } <div class="box"> <img src="./xxx.jpg" alt=""> </div>
块级元素在盒子中垂直水平居中:
<style> .fa{ width: 500px; height: 500px; border: 1px solid #000; display: flex; justify-content: center; align-items: center; } .so{ border: 1px solid #000; width: 200px; height: 200px; } </style> <div class="fa"> <div class="so"></div> </div>