CSS 技巧汇总（css用法）-前端教程-前军教程网

水平居中

文本居中

text-align: center;

块元素居中方法

第一种方法

html代码：

<body>
<div>我是定宽块状元素, Hello ,我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    width:500px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>

也可以写成：

margin-left:auto;
margin-right:auto;

注意：元素的"上下margin"是可以随意设置的。这种水平居中的方法两个2个条件缺一不可

第二种方法

html代码：

<body>
<div>我是定宽块状元素, hello ,我要水平居中显示。</div>
</body>

css代码：

<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    width:500px;/*定宽*/
    position:absoute;
    left:50px;
    margin-left:-25px;
}
</style>

文本缩进

用text-indent代替padding缩进, 优点在于不会改变容器的宽度

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

CSS 技巧汇总（css用法）