元素对齐，居中相关
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了元素对齐，居中相关相关的知识，希望对你有一定的参考价值。
对于一个绝对定位的元素，他的水平居中对齐将left和right设为0，margin设为auto
对于一个绝对定位的元素，他的垂直居中对齐将top和bottom设为0，margin设为auto
如果想定位在外部对齐，那么将对应的位置设为0，然后对应的margin设置为负宽度
<style>
.container {
background-color: #ee0000;
width: 500px;
height: 500px;
margin: auto;
position: relative;
}
.container div {
width: 100px;
height: 50px;
background-color: #66ccff;
}
.box1{
position: absolute;
left: 0;
right: 0;
margin: auto;
}
.box2{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.box3 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.box4{
position: absolute;
left: 0;
margin-left: -100px;
}
</style>
<div class="container">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
</div>
文字的居中对齐相关：
对于文字的换行，将word-wrap设置为break-word 然后word-break设置为截断或者单
词边界截断即可
当然还会有一些问题，在以后的text-wrap可能也会解决一些，现在还没有支持的浏
览器）
（如果不想换行，可以用white-space: nowrap;)
对于文字的居中，一行的情况下非常简单，只要line-height和父元素的height一样
即可
多行一直是一个比较头疼的问题
如果不固定高度也简单，把里面的span变成block，给个paddingtop和bottom顶开他…
…………………
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 100px;
background-color: #66ccff;
margin: auto;
word-break: break-all;
word-wrap: break-word;
}
.box1 span {
display: block;
padding: 50px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"><span>111111111111111111111111111111</span></div>
</div>
</body>
</html>
以下为父元素固定高度的垂直居中：
如果参考表格的话，那还是有解决方法的.但是并不是谁都是表格，虽然css有
display这个东西，但它的兼容啊= =又是ie……
表格有valign这个东西，而一般的span可没有，在有valign的时候，可以用vertical-
align来对齐
不理ie的话，我们有这种方法
将父元素display:table(word-break: break-all;word-wrap: break-word;否则只是
单行的居中) 行内元素 display:table-cell;vertical-align: middle;
（发现这种方法在firefox下，父元素的在container里的中心的定位炸了，只有水平
居中，没有垂直居中了…………）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
background-color: #ee0000;
width: 500px;
height: 500px;
margin: auto;
position: relative;
}
.container div {
width: 100px;
height: 100px;
background-color: #66ccff;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.box1{
word-break: break-all;
word-wrap: break-word;
display: table;
}
.box1 span {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"><span>111111111111111111111111111111</span></div>
</div>
</body>
</html>
加一个小元素的方法
这种方法需要在内部加一层div或者p，然后放一个东西占位
margin和padding是消除p本身自带的边距
这是让一个看不见的东西撑起整个高度，然后把一个p设定为中间对齐
其实是p做了垂直居中
规则是p {vertical-align:middle， display: inline-block;}
看不见元素和p同级（显然不是包进去，因为他要撑开空间）.vi {width: 0;height:
100%;vertical-align: middle;display: inline-block;}
不能给vi宽度，否则就不能和p一行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 100px;
height: 200px;
margin: auto;
background-color: #ee0000;
text-align: center;
}
.box1 p {
margin: 0;
padding: 0;
vertical-align: middle;
display: inline-block;
word-break: keep-all;
word-wrap: break-word;
background-color: #66ccff;
}
.vi {
width: 0;
height: 100%;
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="middle-box">
<div class="box1">
<p>
<span>11111111111</span>
<span>22212222122</span>
</p>
<i class="vi"></i>
</div>
<i class="visible"></i>
</div>
</body>
</html>
以上是关于元素对齐，居中相关的主要内容，如果未能解决你的问题，请参考以下文章