html + css 让元素水平居中的几种方式

最新推荐文章于 2022-03-22 11:44:36 发布

苦苦的码人

最新推荐文章于 2022-03-22 11:44:36 发布

阅读量473

点赞数 1

分类专栏： HTML 文章标签： html css flex css3

本文链接：https://blog.csdn.net/qq_52907353/article/details/113925562

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

以下是html + css 让元素水平居中的几种方式

以下为效果图！！！
在这里插入图片描述

一.margin

对元素使用margin: 0 auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            box-sizing: border-box;
        }
        .box1{
            width: 100vm;
            height: 100vh;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: black;
            margin: 0 auto;
        }
        
    </style>
    

</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

二.left与transform相结合

PS：因为box2要在box1盒子中水平居中所以需要将box1设置为相对定位，box2设置为绝对定位

更要注意的是！！！！！！
left的50%是其父元素宽度的百分之五十
translateX的50%是自身宽度的百分之五十

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            box-sizing: border-box;
        }
        .box1{
            width: 100vm;
            height: 100vh;
            background-color: red;
            position: relative;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
    

</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

三.flex布局

PS：justify-content是沿着主轴方向居中 flex布局默认主轴方向是水平的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            box-sizing: border-box;
        }
        .box1{
            width: 100vm;
            height: 100vh;
            background-color: red;
            display: flex;
            /*justify-content是沿着主轴方向居中 flex默认主轴方向是水平的  */
            justify-content: center;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: black;    
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

四.text-align居中

PS：text-align只对行内元素生效所以先将div块级元素转为行内元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            box-sizing: border-box;
        }
        .box1{
            width: 100vm;
            height: 100vh;
            background-color: red;
            text-align: center;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: black;   
             /*text-align只对行内元素生效 所以先将div块级元素转为行内元素  */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

苦苦的码人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html + css 让元素水平居中的几种方式

以下是html + css 让元素水平居中的几种方式以下为效果图！！！一.margin对元素使用margin: 0 auto;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
复制链接

扫一扫