一、行内元素-水平居中
在父元素的样式中添加：
text-align:center;
二、定宽块级元素-水平居中
所谓定宽块级元素指块级元素的宽度指定，而不是默认的100%，否则此方法无效；
代码：
html:
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
css:
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
三、不定宽块级元素-水平居中
三种思路：
- 加入 table 标签，将这个table居中；
- 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置；
html: <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> css: <style> .container{ text-align:center; } /* margin:0;padding:0（消除文本与div边框之间的间隙）*/ .container ul{ list-style:none; margin:0; padding:0; display:inline; } /* margin-right:8px（设置li文本之间的间隔）*/ .container li{ margin-right:8px; display:inline; } </style>以上是例子代码。
- 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的；
时间： 2024-08-02 02:54:58