CSS内联元素、块级元素的水平居中和垂直居中方法总结

最新推荐文章于 2024-09-24 17:14:12 发布

CuriosityLxn

最新推荐文章于 2024-09-24 17:14:12 发布

阅读量5.8k

点赞数 3

分类专栏： web前端开发之路 CSS相关文章标签： css

本文链接：https://blog.csdn.net/weixin_39431859/article/details/77963725

版权

web前端开发之路同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

CSS相关

3 篇文章 0 订阅

订阅专栏

在牛客网上刷题，错了一道块级元素居中的题，借此复习一下CSS中元素居中的各种方式：

更新：BootStrap辅助类：center-block
用法：定宽容器中的内容到达宽度自动换行，高度不定，自动水平垂直都居中。简单测试了一下，中文日文可自动换行，英文不行。

水平居中

一. 内联元素居中（文本text、图片img、按钮button等）
给父元素设置text-align:center。
给一个例子：使若干个元素（数量可变），在一行中居中显示，可用列表实现。我们知道列表中的<li>标签元素为块级元素，故可先将其display:inline，在一行中显示，然后将<li>的父元素，<ul>水平居中显示即可，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
 <style type="text/css">
    li{display: inline;}
    ul{text-align: center;}
 </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

注意：前提是子元素（即例子中的<li>）没有被设置浮动。

二. 块级元素居中
①定宽块级元素居中
margin:0 auto;
②不定宽块级元素居中
总共有三种方法可解：
Ⅰ.利用display:inline使块级元素内联显示；
Ⅱ.利用<table>长度自适应的特性；
Ⅲ.结合父元素，设置浮动和定位。
方法Ⅰ详见以上 内联元素水平浮动 。
方法Ⅱ：<table>是个盛放其他元素的块级容器，其宽度不默认父元素的宽，而是随其中文本长度决定，因此可看作一个定宽块级元素。
给需要水平浮动的元素设定display:table或放入<table>标签中，即可使用margin:0 auto像定宽块级元素一样居中显示了。代码如下：
<table>标签嵌套：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>

 <style type="text/css">
 table{margin: 0 auto;}
 </style>
</head>
<body>
<table>
<tr>
<td>
<p>这是一个不定宽的块级元素,增删其中文字后仍然居中</p>
</td>
</tr>
</table>
</body>
</html>

display:table;

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
 <style type="text/css">
 p{display: table;margin: 0 auto;}
 </style>
</head>
<body>
<p>这是一个不定宽的块级元素,增删其中文字后仍然居中</p>

</body>
</html>

方法Ⅲ：利用相对定位，使父元素相对于body向右偏移50%，再使需要居中的元素相对于父元素向左偏移50%，为了防止高度塌陷设置浮动前一定要给父元素清除浮动。为了更直观的看到两div位置，给父元素加了黑色边框，子元素加了红色边框，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>

 <style type="text/css">
 #father{
    position: relative;
    clear:both;
    float: left;
    left: 50%;
    border: 1px solid black;
 }
 #child{
    position: relative;
    float: left;
    left: -50%;
    border: 1px solid red;
 }
 </style>
</head>
<body>
<div id="father">
    <div id="child">
        这是一个不定宽的块级元素,增删其中文字后仍然居中
    </div>
</div>
</body>
</html>

父元素position:absolute，子元素保持相对定位也可以实现水平居中，
因为绝对定位使父元素脱离了文档流。

垂直居中

一. 未知高度元素的垂直居中
非常好用的<table>又来啦，很简单的可以利用<td>标签默认垂直居中（无需显式的设置vertical-align: middle）的特性，让<table>铺满页面，将要居中的元素放进去即可。代码如下：

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style type="text/css">
table {
    position:absolute;
    width:100%; height:100%; 
    border: 1px solid black;
    }
.test {border: 1px solid red; }
 </style>
</head>
<body>
<table>
<tr>
<td>
<ul class="test">
<li>假装有内容</li>
<li>假装有内容</li>
<li>假装有内容</li>
<li>假装有内容</li>
<li>假装有内容</li>
<li>假装有内容</li>
</ul>
</td>
</tr>
</table>
</body>
</html>