高度不定如何处置居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高度不定如何处置居中相关的知识，希望对你有一定的参考价值。
一、宽度高度都确定如何在一个div中居中
这个是很常见的但方法有很多，我们先上html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding:0; } .box1{ width: 200px; height: 200px; background-color: red; margin: 50px auto; } .box2{ width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
如图的样式
让绿色的div在红色的div中水平垂直居中的方法很多，下面列出一些
.box1{ width: 200px; height: 200px; background-color: red; margin: 50px auto; position: relative; } .box2{ width: 100px; height: 100px; background-color: green; position: absolute; top:50%; left:50%; margin-top: -50px; margin-left: -50px; }
方法一：让父盒子相对定位也可以绝对定位，子元素绝对定位position: absolute;top:50%;left:50%;水平和垂直偏移量自身宽度和高度的一半.这是最普通的一种方法。
方法二：让父盒子相对定位也可以绝对定位，子元素绝对定位position: absolute;top:50%;left:50%;用css3的样式transform:translate(-50%,-50%)。
二、宽度确定高度不定如何在一个div中水平垂直居中
先上html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding:0; } .box1{ width: 200px; height: 200px; background-color: red; margin: 50px auto; position: relative; } .text{ width: 100px; } </style> </head> <body> <div class="box1"> <p class="text">我都发我我的房间蜂窝肺我无法看而分为偶发我为我疯狂非我付款</p> </div> </body> </html>
方法一:
.text{
width: 100px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
采用css3的样式transform方法
方法二：
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
line-height: 200px;
text-align: center;
}
.text{
width: 100px;
line-height: 1;
display: inline-block;
vertical-align: middle;
}
父盒子行高设为200px;子元素转化为行内元素然后加上vertical-align: middle;这是让他垂直居中，对于水平居中我们就采用让父盒子加上text-align: center;就ok了
方法三：
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
display: -webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
}
.text{
width: 100px;
line-height: 1;
}
使用 box-align 和 box-pack 属性，对 div 框的子元素进行居中：
目前没有浏览器支持 box-pack 属性。
Firefox 支持替代的 -moz-box-pack 属性。
Safari、Opera 以及 Chrome 支持替代的 -webkit-box-pack 属性。
所以使用需谨慎！！！
三、宽度高度都不确定如何在一个div中水平垂直居中
这种情况和宽度确定高度不定的方法一样，不过还有一种方法
转化为表格
.box1{
width: 200px;
height: 200px;
background-color: red;
margin: 50px auto;
display:table;
}
.text{
width: 100px;
line-height: 1;
display: table-cell;
vertical-align: middle;
}
然后子元素display: table-cell;
vertical-align: middle;
就ok了，就总结这么多，请各位大神多多批评指正，谢谢！！！
以上是关于高度不定如何处置居中的主要内容，如果未能解决你的问题，请参考以下文章