简单易懂！让你轻松掌握CSS盒子垂直与水平居中技巧及最佳布局方案

最编程 2024-02-13 08:21:29

...

垂直水平居中技巧，以下列举4种垂直水平居中，2种比较常用的垂直居中

1.已知子容器的宽高，代码如下：

子容器设置：

举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>已知宽高实现盒子水平垂直居中</title>
    <style type="text/css">
    .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;
    }

    .box1 {
        width: 200px;
        height: 200px;
        border: 1px solid red;
        position: relative;
        top: 50%;
        left: 50%;
        margin-left: -100px;
        margin-top: -100px;
        
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

</html>

2.不知道子容器的宽高

子容器设置：

举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>宽高不定实现盒子水平垂直居中</title>
    <style type="text/css">
    .box {
        border: 1px solid #00ee00;
        height: 300px;
        position: relative;
    }
    .box1 {
        border: 1px solid red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
        </div>
    </div>
</body>

</html>

3.居中设置-行内元素

如果设置行内元素（文本、图片等）水平居中时，是通过给其父元素设置 text-align: center;height: 50px;line-height: 50px;来实现的。

<style>
div{
    border:1px solid red;
    margin:20px;
}
.txtCenter{
	text-align: center;
	height: 50px;
	line-height: 50px;
}
</style>

<body>
   <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>

4.我觉得最好的居中方法

不用知道块状元素宽高，也不用低版本浏览器不适配的缺点，直接设置块状元素以下的样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        .container {
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
            height: 200px;
        }
        .item {
            background-color: #ccc;
        }
        .container-1 {
            position: relative;
        }
        .container-1 .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container container-1">
        <div class="item">
            this is item
        </div>
    </div>
</body>
</html>

5.水平居中设置-定宽块状元素

当被设置元素为块状元素时用 text-align：center 就不起作用了
定宽块状元素：块状元素的宽度width为固定值。
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定宽块状元素水平居中</title>
<style>
div{
    border:1px solid red;
    width:200px; /*定宽*/
    margin:20px auto; /* margin-left 与 margin-right 设置为 auto */
}

</style>
</head>

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

6.水平居中设置-不定宽块状元素

方法一：
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括、、 )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
方法二：
改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用 text-align:center 设置块状元素的父元素来实现居中效果。
方法三：
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

上一篇：盒模型大法好！轻松实现CSS居中样式

下一篇：成为CSS文字文本样式的专家之旅