HTMLCSS学习笔记（十）——元素居中方式

最新推荐文章于 2024-03-02 00:46:19 发布

粽子师兄

最新推荐文章于 2024-03-02 00:46:19 发布

阅读量151

点赞数

分类专栏： HTML\CSS 文章标签： html5 html css3 css

本文链接：https://blog.csdn.net/qq_45268602/article/details/107952109

版权

HTML\CSS 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

元素居中对齐方式很多种，这里整理了几种居中方式：

方式一： 知道父元素和子元素的宽高，通过padding、margin实现居中。

<style>
		.box1{
            width: 550px;
            height: 300px;
            background: yellow;
            position: relative;
            padding-top: 100px;
            padding-left: 450px;
        }
        .child1{
            width: 100px;
            height: 200px;
            background: red;
            position: absolute;
        }
</style>
<body>
	<div class="box1">
		<div class="child1"></div>
	</div>
</body>

在这里插入图片描述
方式二： 不知道父元素的宽高，知道子元素的宽高，通过设置子元素的left、top，再设置margin-left、margin-top来实现居中

<style>
.box2{
            width: 1000px;
            height: 400px;
            background: green;
            position: relative;
        }
        .child2{
            width: 100px;
            height: 200px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -100px;
        }
</style>
<body>
	<div class="box2">
            <div class="child2"></div>
        </div>
</body>

在这里插入图片描述
方式三： 不知道父元素和子元素的宽高，将子元素的left、right、top、bottom设为0，再设置margin为auto来实现居中

<style>
.box3{
            width: 1000px;
            height: 400px;
            background: blue;
            position: relative;
        }
        .child3{
            width: 100px;
            height: 200px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
</style>
<body>
<div class="box3">
            <div class="child3"></div>
        </div>
</body>

在这里插入图片描述
方式四： 不知道父元素和子元素的宽高，将子元素的left、right设置为50%，再设置transform: translate(-50%,-50%)，其中translate设置水平和垂直位置

<style>
.box4{
            width: 1000px;
            height: 400px;
            background: green;
            position: relative;
        }
        .child4{
            width: 100px;
            height: 200px;
            background: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
</style>
<body>
<div class="box4">
            <div class="child4"></div>
        </div>
</body>

在这里插入图片描述
方式五： 不知道父元素和子元素的宽高，不使用定位，设置父元素display:flex;子元素使用margin:auto;但是有个限制，只能有一个子元素

<style>
.box5{
            width: 1000px;
            height: 400px;
            background: blue;
            display: flex;
        }
        .child5{
            width: 100px;
            height: 200px;
            background: red;
            margin: auto;
        }
</style>
<body>
<div class="box5">
            <div class="child5"></div>
        </div>
</body>

在这里插入图片描述
方式六：
vertical-align 垂直居中

middle 居中
top 顶部对齐
bottom 底部对齐
baseline 基线对齐
注意：只有行内块元素支持该属性

<style>
.box6{
            width: 400px;
            height: 400px;
            background: cadetblue;
            text-align: center;
        }
        .box6 span{
            display: inline-block;
            width: 0px;
            height: 400px;
            background: blueviolet;
            vertical-align: middle;
        }
        .box6 img{
            vertical-align: middle;
        }
</style>
<body>
<div class="box6">
            <span></span>
            <img src="../images/photo01.jpg" alt="">
        </div>
</body>

在这里插入图片描述

粽子师兄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTMLCSS学习笔记（十）——元素居中方式

元素居中对齐方式很多种，这里整理了几种居中方式：方式一：知道父元素和子元素的宽高，通过padding、margin实现居中。<style> .box1{ width: 550px; height: 300px; background: yellow; position: relative; padding-top: 100px; padding
复制链接

扫一扫

专栏目录