一丶文字居中法(行内元素)
1.水平居中(单行)
给父元素添加一个==text-align: center;==,前提是父元素必须是个块级元素
-
HTML
<div id="dad"> <span id="son">子元素</span> </div> -
CSS
<style> #dad { display: block; width: 500px; height: 300px; background-color: #00ffdd; /*水平居中*/ text-align: center; } #son{ background-color: #ffe500; } </style>
-
效果
1597642800089.png
1.垂直居中(单行)
只需要设置单行行内元素的"行高等于盒子的高"即可
-
HTML
<div id="dad"> <span id="son">子元素</span> </div> -
CSS
<style> #dad { display: block; width: 500px; height: 300px; background-color: #00ffdd; } #son{ background-color: #ffe500; /*垂直居中*/ line-height: 500px } </style>
- 效果
1597651802223.png
3.水平垂直居中(单行)
让子元素的行高==line-height: 父元素高度;==和父元素高度相等就可以实现文字垂直居中了
-
HTML
<div id="father"> <span id="son">子元素</span> </div>
- CSS
<style>
#dad{
margin: 0 auto;
background-color: #00ffdd;
width: 500px;
height: 500px;
/*水平居中*/
text-align: center;
}
#son{
background-color: #ffe500;
/*垂直居中*/
line-height: 500px;
}
</style>
- 效果
1597643398651.png
4.多行的行内元素水平垂直居中
使用给父元素设置==display:table-cell;==和==vertical-align: middle;==属即可；
-
HTML
<div id="father"> <span id="son">子元素</span> </div>
- CSS
<style>
#dad{
margin: 0 auto;
background-color: #00ffdd;
width: 500px;
height: 500px;
display: table-cell;
vertical-align:middle;
}
#son{
background-color: #ffe500;
width: 100px;
height: 100px;
}
</style>
- 效果
1597652188959.png
二丶图片居中法
1.水平居中
-
HTML
<div id="dad"> <img src="../微信图片_20200804171152.png" alt=""> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; /*水平居中*/ text-align: center; } #dad img{ width: 100px; height: 100px; } </style> 效果
1597644174119.png
2.水平垂直居中
-
HTML
<div id="dad"> <img src="../微信图片_20200804171152.png" alt=""> </div>
-
CSS
<style> # dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; /*水平居中*/ text-align center; /*垂直居中*/ line-height: 500px; } # dad img{ width: 100px; height: 100px; /*垂直居中*/ /*display: block;*/ vertical-align: middle; } </style> 效果
1597644934442.png
三丶块元素居中
1.水平居中
定宽度：**需要谁居中，给其设置 ==margin: 0 auto;== （作用：使盒子自己居中）
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; } #son{ background-color: #ffe500; width: 100px; height: 100px; /*水平居中*/ margin: 0 auto; } </style> 效果
1597646200063.png
定宽度：**需要谁居中，给其设置 ==margin: 0 auto;== （作用：使盒子自己居中）
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; } #son{ background-color: #ffe500; height: 100px; /*水平居中*/ margin: 0 auto; width: fit-content; } </style> 效果
1597654422580.png
不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;
-
HTML
<div id="dad"> <span id="son">子元素</span> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; /*水平居中*/ text-align: center; } #son{ background-color: #ffe500; width: 100px; height: 100px; display: inline-block; } </style> 效果
1597646648052.png
四丶position定位居中法
1.水平居中
子绝父相left+margin-left定位居中
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的==left:50%==，即让子元素的左上角水平居中；
定宽度：设置绝对子元素的 ==margin-left:==-元素宽度的一半px;
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; position: relative; } #son{ background-color: #ffe500; width: 100px; height: 100px; position: absolute; left: 50%; margin: 0 0 0 -50px; } </style> 效果
1597648150275.png
子绝父相left+transform定位居中
不定宽度：利用css3新增属性==transform: translateX(-50%);==
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; position: relative; } #son{ background-color: #ffe500; width: 100px; height: 100px; position: absolute; left: 50%; transform: translateX(-50%); } </style> 效果
1597648150275.png
2.垂直居中
子绝父相top+margin-top定位居中
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的==top: 50%==，即让子元素的左上角垂直居中；
定高度：设置绝对子元素的 ==margin-top:== -元素高度的一半px;
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; position: relative; } #son{ background-color: #ffe500; width: 100px; height: 100px; position: absolute; top: 50%; margin-top:-50px; } </style> 效果
1597648936473.png
子绝父相top+transform定位居中
不定宽度：利用css3新增属性==transform: translateY(-50%);==
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; position: relative; } #son{ background-color: #ffe500; width: 100px; height: 100px; position: absolute; top: 50%; transform: translateY(-50%); } </style> 效果
1597648936473.png
3.水平垂直居中
设置父元素为相对定位，给子元素设置绝对定位，==top: 0; right: 0; bottom: 0; left: 0; margin: auto;==
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; position: relative; } #son{ background-color: #ffe500; width: 100px; height: 100px; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style> 效果
1597649910034.png
设置父元素为相对定位，给子元素设置绝对定位，==left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;==
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; position: relative; } #son{ background-color: #ffe500; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } </style> 效果
1597649910034.png
未知元素的高度和宽度:设置父元素为相对定位，给子元素设置绝对定位，==left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);==
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; position: relative; } #son{ background-color: #ffe500; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } </style> 效果
1597649910034.png
五丶使用flexbox布局实现居中
1.水平居中（宽度定不定都可以）
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 ==display: flex; justify-content: center;==
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; display: flex; justify-content: center; } #son{ background-color: #ffe500; width: 100px; height: 100px; } </style> 效果
1597650784327.png
2.垂直居中（高度定不定都可以）
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 ==display: flex; align-items: center;==
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; display: flex; align-items: center; } #son{ background-color: #ffe500; width: 100px; height: 100px; } </style> 效果
1597651125156.png
3.水平垂直居中
设置父元素为flex定位，**justify-content: center; align-items: center;
-
HTML
<div id="dad"> <div id="son">子元素</div> </div>
-
CSS
<style> #dad{ margin: 0 auto; background-color: #00ffdd; width: 500px; height: 500px; display: flex; justify-content: center; align-items: center; } #son{ background-color: #ffe500; width: 100px; height: 100px; } </style> 效果
1597651340027.png
六丶元素(空标签)水平垂直居中
-
HTML
<div class="floater"></div> <div class="box"> 水平垂直居中元素 </div>
-
CSS
<style> html, body { height: 100%; } .box { position: relative; /*清除浮动*/ clear:both; height: 100px; width: 100px; margin: 0 auto; background: #ffe500; } .floater { float:left; /*相对于父元素高度的50%*/ height:50%; /*居中元素高度的一半*/ margin-bottom: -50px; width: 100%; background-color: rebeccapurple; } </style> 效果
1597653699200.png
七丶 CSS3的calc方法水平垂直居中
盒模型的组成
盒模型
什么是calc()
calc()属于CSS3，用于动态计算长度值，可以用在任何一个需要的地方。有了calc()，你可以通过计算来决定一个对象的大小和形状。还可以在一个calc()内部嵌套另一个calc()。妈妈再也不担心我水平垂直居中不了了。
-
HTML
<div id="dad"> <div id="son">HTML5</div> </div>
-
CSS
<style> #dad { width: 400px; height: 400px; background-color: #00ffdd; } #son { /*利用CSS3的calc() ，它的用法类似于函数，能够给元素设置动态的值：*/ /*（父级的宽度 - 自身的宽度）的一半当做padding的值*/ padding: -webkit-calc((100% - 100px) / 2); padding: -moz-calc((100% - 100px) / 2); padding: -ms-calc((100% - 100px) / 2); padding: calc((100% - 100px) / 2);/*这里算出来的就是子元素的padding值,其他三个是为了考虑其他浏览器兼容性*/ width: 100px; height: 100px; background-color: #ffe500; color: #000000; /*背景只显示内容区域*/ background-clip: content-box; } </style> -
效果
1597655409832.png
calc()支持程度
calc支持程度
