前端CSS中简单且快速实现元素居中的方法

爱吃土豆的粉条

已于 2023-03-13 19:36:28 修改

阅读量509

点赞数

文章标签：前端 css html

于 2023-03-13 18:56:29 首次发布

本文链接：https://blog.csdn.net/Jclam/article/details/129501909

版权

文章介绍了使用CSS实现元素居中布局的三种常见方法：1)通过设置子元素margin:0auto和line-height等于height；2)结合absolute定位和transform属性；3)利用flex布局的justify-content和align-items属性。读者需要掌握这三种居中技术。

摘要由CSDN通过智能技术生成

一、水平居中（即横向纵向都位于盒子中间）

1、子元素设置：margin: 0 auto; line-height等于height；

<style>

body{

}

.father{

width: 300px;

height: 300px;border: 1px solid #000;

margin: 0 auto;

display: flex;

}

.son{

width: 100px;height: 100px;

border: 1px solid #000;

background-color: pink;

align-self: center;

margin: 0 auto;

line-height: 100px;

}

</style>

</head>

<body>

<div class="father">

<div class="son"></div>

</div>

</body>

2.利用绝对和相对定位（利用绝对相对定位有多种方法，以下只举例较为简便方法）

absolute + transform

<style>

body{

}

.father{

width: 300px;

height: 300px;border: 1px solid #000;

position: relative;

}

.son{

width: 100px;height: 100px;

border: 1px solid #000;

background-color: pink;

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

</style>

</head>

<body>

<div class="father">

<div class="son"></div>

</div>

absolute + margin: auto

<style>

body{

}

.father{

width: 300px;

height: 300px;border: 1px solid #000;

margin: 0 auto;

position: relative;

}

.son{

width: 100px;height: 100px;

border: 1px solid #000;

background-color: pink;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

}

</style>

</head>

<body>

<div class="father">

<div class="son"></div>

</div>

</body>

三、利用flex布局

<style>

body{

}

.father{

width: 300px;

height: 300px;border: 1px solid #000;

display: flex;

justify-content: center;

align-items: center;

}

//或者父元素设置display: flex; 子元素设置margin: auto;

.son{

width: 100px;height: 100px;

border: 1px solid #000;

background-color: pink;

}

</style>

</head>

<body>

<div class="father">

<div class="son"></div>

</div>

</body>