css居中的几种方法_css水平垂直居中的几种方式

最新推荐文章于 2023-05-24 14:34:04 发布

weixin_39693971

最新推荐文章于 2023-05-24 14:34:04 发布

阅读量72

点赞数

文章标签： css居中的几种方法 css水平垂直居中 flex布局水平垂直居中 html 居中 html定位的几种方式 html居中

读心悦qingzhuyue.cn

在前端岗位快三年了。布局中关于水平垂直两个方向居中的实现有几种方式：

方式一：将容器设置为弹性容器，即display: flex;,在水平和垂直两个方向分别设置居中对齐。完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css水平垂直居中对齐</title>
    <style>
     body{
         font-size: 30px;
         min-height: 100vh;
         background-color: aqua;
         display: flex;
         align-items: center;/*垂直方向居中*/
         justify-content: center;/*水平居中*/
     }
     /* #center{
         width: 300px;
         height: 300px;
         border: 1px solid red;
         text-align: center;
         line-height: 300px;
     } */
    </style>
</head>
<body>
    <div id="center">水平垂直居中</div>
</body>
</html>

这个方式无论无论子元素是否设置width和height，都可行！

方式二：子元素设置固定的width和height，使用绝对定位进行居中设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css水平垂直居中对齐</title>
    <style>
     body{
         font-size: 30px;
         min-height: 100vh;
         background-color: aqua;
        position: relative;
     }
     /* 子元素设置具体的width和height */
     #center{
         width: 300px;
         height: 300px;
         border: 1px solid red;
         text-align: center;
         line-height: 300px;
         margin:auto;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
     }
    </style>
</head>
<body>
    <div id="center">水平垂直居中</div>
</body>
</html>

或者是：

/* 子元素设置具体的width和height */
     #center{
         width: 300px;
         height: 300px;
         border: 1px solid red;
         text-align: center;
         line-height: 300px;
         margin:auto;
         position: absolute;
         top: 50%;
         left: 50%;
         margin-left: -150px;
         margin-top: -150px;
     }

使用css3中的变换属性：

/* 子元素设置具体的width和height */
     #center{
         width: 300px;
         height: 300px;
         border: 1px solid red;
         text-align: center;
         line-height: 300px;
         margin:auto;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%,-50%);
     }

weixin_39693971

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css居中的几种方法_css水平垂直居中的几种方式

读心悦qingzhuyue.cn在前端岗位快三年了。布局中关于水平垂直两个方向居中的实现有几种方式：方式一：将容器设置为弹性容器，即display: flex;,在水平和垂直两个方向分别设置居中对齐。完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫