HTML/CSS常见的几种水平居中、垂直居中、水平垂直居中方法

最新推荐文章于 2024-02-16 09:39:04 发布

m0_54889555

最新推荐文章于 2024-02-16 09:39:04 发布

阅读量2.5w

点赞数 3

文章标签： html css

本文链接：https://blog.csdn.net/m0_54889555/article/details/113735386

版权

HTML/CSS常见的几种水平居中、垂直居中、水平居中方式

一、水平居中

1.第一种方式

在css中使用text-align和display属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第一种居中方式</title>
<style>
.parent{
		background:darkgray;
		text-align:center;
	}
.child{
		width:200px;
		height:200px;
		background:darkred;
		display:inline-block;
	}
</style>
</head>
<body>
		<div class="parent">
        <div class="child">
        </div>
        </div>
</body>
</html>

效果：
在这里插入图片描述

     text-align的属性值一般常用的三种：
     1.left    左对齐
     2.right  右对齐
     3.center  居中对齐

这里将其父div设置对齐方式为center，如果不给子级div加display属性时，子级div并不会居中，居中的将会是子级div的文本和父级div的文本，如果要将子级div居中就需要设置其display：inline-block；

display的属性值一般常用的三种：
1. inline 内联（text-align属性有效）
2. block 块级
3. inline-block 内联+块级（text-align属性有效）
*当子级div的display设置成inline属性时，子级div的宽度和高度将会失效，但div可以实现居中效果，只是宽度和高度将无法设置
*当子级div的display属性设置成line-block属性时，子级div的宽度和高度有效，一般常用这个属性，如果不给div设置display属性时，将会默认是block块级元素
注意：text-align属性具有继承性，也就是说当父级设置了这个属性时，其所有子级(不管多少层子级标签)的文本内容将会默认是你所设置的对齐方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第一种居中方式</title>
    <style>
        .parent{
            background: darkgray;
            text-align: center;
        }
        .child{
            width: 200px;
            height: 200px;
            background: darkred;
            display: inline-block;
        }
        .test{
            width: 150px;
            background: forestgreen;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">
            <div class="test">居中的文本</div>
        </div>
    </div>
</body>
</html>

效果：
在这里插入图片描述这种居中方式优缺点：

优点：浏览器兼容性比较好，因为text-align和inline-block这两个属性是CSS2支持的，所以在老版本的浏览器中同样可以运行。

缺点：text-align属性具有继承性，使用它将会导致子标签的文本也是居中的，如果要解决这个问题就需要在其子标签中重新设置text-align属性，但是设置后，该标签的子标签同样会继承上一级的text-align。　
　　　　　使用这种居中方式很有可能会每个子级标签重新设置text-align属性。

2.第二种居中方式

在CSS中使用display和margin属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第二种居中方式</title>
    <style>
        .parent{
            background: gray;
        }
        .child{
            width: 200px;
            height: 200px;
            background: indigo;
            display: table;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- 父级标签 -->
    <div class="parent">
        <!-- 子级标签-->
        <div class="child"></div>
    </div>
</body>
</html>

效果：在这里插入图片描述

这种居中方式的优缺点：

优点：只需对子级标签进行设置就可以实现居中效果。

缺点：如果子级标签脱离文档流，将会导致margin属性值失效。

脱离文档流的几个属性：

1.float浮动属性会导致脱离文档流

2.position属性值设置成absolute（绝对定位）

3.position属性值设置成fixed的（固定定位）

子级标签设置了这几个属性值时，将会脱离文档流导致margin属性值失效

3.第三种居中方式

在CSS中使用position和transform属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>第三种居中方式</title>
    <style>
        .parent{
            width: 500px;
            height: 200px;
            position: relative;
            background: #000;
        }
        .child{
            background: green;
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <!-- 父级标签 -->
    <div class="parent">
        <!-- 子级标签 -->
        <div class="child"></div>
    </div>
</body>
</html>

效果：
在这里插入图片描述

这种布局方式的优缺点：

优点：不论父级标签是否脱离了文档流，对子级标签都不会影响水平居中效果。

缺点：transform属性是CSS3中新增属性，浏览器支持情况不好。

垂直居中

垂直居中值当前标签在父级容器中垂直方向是居中显示的实现垂直居中的几种方式：
1.table-cell+vertical-align 属性配合使用

2.absolute+transform 属性配合使用

3.display+align-items 属性配个使用

4.position+margin 属性配合使用

第一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent{
            height: 600px;
            width: 200px;
            display: table-cell;
            vertical-align: middle;
            background: chocolate;
        }
        .child{
            width: 200px;
            height: 200px;
            background: darkblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
vertical-align:属性时用来设置文本内容垂直方向的对齐方式。

这里常用属性值：

top顶部对齐

middle 居中对齐

bottom 底部对齐

这种方式的优点与缺点：

优点：浏览器兼容性好，支持老版本的浏览器，这两个属性在CSS2中也是支持的而老版本的浏览器对CSS2的支持非常好。

缺点：vertical-align属性具有继承性，这将会导致父级标签内的所有文本都是垂直居中的。

第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent{
            background: cornflowerblue;
            height: 600px;
            width: 200px;
            position:relative;
        }
        .child{
            width: 200px;
            height: 200px;
            position:absolute;
            top:50%;
            transform:translateY(-50%);
            background: crimson;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

效果：
在这里插入图片描述

这种方式的优缺点：

优点：父级标签不管是否脱离文档流，不会影响子级标签垂直居中的效果。

缺点：transform属性是CSS3中的新属性，浏览器支持不好，在个别老版本的浏览器中不适用。

第三种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent{
            background: darkcyan;
            height: 600px;
            width: 200px;
            display: flex;
            align-items: center;
        }
        .child{
            background: darkred;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
这里布局使用的flex布局（弹性布局）任何一个容器都可以指定为flex布局，在flex布局中它的子级标签都将会成为flex item。

水平垂直居中

1.使用display+margin实现水平方向居中，使用table-cell+vertical-align实现垂直方向居中。

2.absolute+transform实现水平加垂直方向居中。

第一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent{
            width: 600px;
            height: 400px;
            background: cadetblue;
            display: table-cell;
            vertical-align: middle;
        }
        .child{
            width: 200px;
            height: 200px;
            background: coral;

            display: block;
            margin: 0 auto;
        }
    
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
使用这种方式对浏览器的支持是比较好的，因为所用的样式在CSS2也是支持的。

第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .parent{
            width: 100%;
            height: 400px;
            position: relative;
            background: green;
        }
        .child{
            position: absolute;
            width: 200px;
            height: 200px;
            background: blue;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

在这里插入图片描述
此处如果父级标签不开启定位的话，那么子级标签将会以body标签进行定位，如果父级标签开启了定位，那么子级标签将会相对于父级进行定位，代码可以把宽度改小，就能看见一样垂直水平的效果。

transform属于CSS3的新属性，在老版本浏览器支持性不好，translate(-50%,-50%);表示的是将当前宽度/2，高度/2，反向移动，第一个是左右，第二个是上下移动，-50%表示左移动200px/2 = 100px,如果是正50%，就是向右移动100px,第二个同理。

m0_54889555

关注

3
点赞
踩
26

收藏

觉得还不错? 一键收藏
1
评论
HTML/CSS常见的几种水平居中、垂直居中、水平垂直居中方法

HTML/CSS常见的几种水平居中、垂直居中、水平居中方式一、水平居中1.第一种方式在css中使用text-align和display属性<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>第一种居中方式</title><style>
复制链接

扫一扫