CSS实现元素居中的三个常用方法

ོ栖落

已于 2022-12-15 12:23:04 修改

阅读量268

点赞数 1

分类专栏：前端文章标签：前端

于 2022-08-07 10:41:16 首次发布

本文链接：https://blog.csdn.net/qq_63806300/article/details/126203618

版权

前端专栏收录该内容

5 篇文章 3 订阅

订阅专栏

本文介绍了使用CSS实现元素居中的三种常见方法：1) absolute+margin，需要知道子元素尺寸，通过设置负边距实现居中；2) flex布局，无需知道子元素尺寸，利用flexbox的align-items和justify-content属性轻松居中；3) absolute+transform，同样不需要子元素尺寸，通过transform的translate方法实现居中。

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

一、absolute+margin

需要知道子元素的宽高。

HTML

<div class="container">
	<img class="dog" src="https://c-ssl.duitang.com/uploads/blog/201411/07/20141107111217_iAXPt.jpeg alt="">
</div>

CSS

.container{
	width:1000px;
    height:800px;
    border:solid 1px;
    position:relasive;
}
.dog{
	width:700px;
    height:525px;
    border-radius:50%;
    position:absolute;
    left:50%;
    right:50%;
    margin-left:-350px;
    margin-right:-523px;
}

二、flex

不需要知道子元素的宽高。

HTML

<div class="container">
	<span contenteditable="true" class="content">hello medium</span>
</div>

CSS

.container{
	width:400px;
	height:200px;
	border:solid 1px #e3c1a9;
	border-radius:30px;
	display:flex;
	align-items:center;
	jusitify-content:center;
}
.content{
	padding:20px;
	border-radius:10px;
	background-cplor:#e3c1a9;
	color:#ffffff;
}

三、absolute+transform

不需要知道子元素的宽高。

CSS

.container{
	width:400px;
	height:200px;
	border:solid 1px #e3c1a9;
	border-radius:30px;
	position:relative;
}
.content{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	padding:20px;
	border-radius:10px;
	background-color:#e3c1a9;
	color:#ffffff;
}