CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法
CSS实现盒子模型水平居中的方法
水平居中效果图
水平居中
全局样式
.parent { color: #FFFFFF; height: 200px; width: 200px; margin: 0 auto; background-color: #000000;} .child { width: 50px; height: 50px; background-color: #26f12d;}
第一种：margin+width
这种方法适用于已经知道width的盒子，实现起来比较简单
<div class="parent"> <div class="child">div>div>
.child { width: 50px; margin: 0 auto;}
第二种：text-align+inline-block
这种方法适用于多种场景（width不固定）
<div class="parent"> <div class="child">div>div>
.parent { text-align: center;}.child { display: inline-block;}
第三种：float+position
这种方法适用于多种场景（width不固定）
<div class="parent"> <div class="between"> <div class="child">div> div>div>
.between { position: relative; left: 50%; float: left;}.child { position: relative; right: 50%;}
第四种：
这种方法适用于多种场景（width不固定）
<div class="parent"> <div class="between"> <div class="child">div> div>div>
.parent { position: relative;}.between { position: absolute; left: 50%;}.child { position: relative; right: 50%;}
第五种：flex
这种方法适用于多种场景（width不固定）
<div class="parent"> <div class="child">div>div>
.parent { display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: horizontal;}
第六种：fit-content
这种方法适用于多种场景（width不固定）
<div class="parent"> <div class="between"> <div class="child">div> div>div>
.between { width: -webkit-fit-content; margin: 0 auto;}
CSS实现盒子模型垂直居中的方法
垂直居中效果图
垂直居中
第一种：position
这种方法适用于已经知道width的盒子
<div class="parent"> <div class="child">div>div>
.parent { position: relative; width: 200px; height: 200px;} .child { position: absolute; margin: 75px 0;}
第二种：position+transform
这种方法适用于已经知道width的盒子
<div class="parent"> <div class="child">div>div>
.parent { position: relative; width: 200px; height: 200px;} .child { position: absolute; top: 50%; transform: translate(0%, -50%);}
第三种：flex布局
这种方法适用于多种场景（width不固定）
<div class="parent"> <div class="child">div>div>
.parent { display: flex; align-items: center;}
第四种：table-cell布局
这种方法适用于多种场景（width不固定）
<div class="parent"> <div class="between"> <div class="child">div> div>div>
.parent { display: table;} .between { display: table-cell; vertical-align: middle;}
CSS实现盒子模型水平垂直居中方法
水平垂直居中效果图
水平垂直居中
第一种：
<div class="parent"> <div class="child">div>div>
.parent { position: relative;} .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
第二种：
<div class="parent"> <div class="child">div>div>
.parent { position: relative;} .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
第三种：
<div class="parent"> <div class="child">div>div>
.parent { position: relative;} .child { position: absolute; top: 50%; left: 50%; margin-top: -25px; /* 自身 height 的一半 */ margin-left: -25px; /* 自身 width 的一半 */}