CSS对齐方式
一、元素居中对齐
要水平居中对齐一个元素(如
), 可以使用 margin: auto;或margin:0 auto。
设置到元素的宽度将防止它溢出到容器的边缘。
元素通过指定宽度,并将两边的空外边距平均分配:
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
二、文本居中对齐
如果仅仅是为了文本在元素内居中对齐,可以使用 text-align: center;
.center {
text-align: center;
border: 3px solid green;
}
三、左右对齐-使用定位方式
我们可以使用 position: absolute; 属性来对齐元素:
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
注释:绝对定位元素会被从正常流中删除,并且能够交叠元素。
提示: 当使用 position 来对齐元素时, 通常 元素会设置 margin 和 padding 。 这样可以避免在不同的浏览器中出现可见的差异.
四、左右对齐-使用float方式
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
当像这样对齐元素时,对 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
五、文本垂直居中对齐-使用padding
CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部底部使用 padding:
.center {
padding: 70px 0;
border: 3px solid green;
}
如果要水平和垂直都居中,可以使用 padding 和 text-align: cente
六、文本垂直居中-使用line-height
line-height和height保持一致即可;
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* 如果文本有多行,添加以下代码: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
七、垂直居中-使用position和transform
除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div class="center">
<p>我是水平和垂直居中的。</p>
</div>
八、使用flex布局来实现水平垂直居中
<style>
.center {
height: 200px;
border: 3px solid green;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<div class="center">
<p>我是flex</p>
</div>