css 居中
来源： 2024-05-10 03:09:35在web设计中，居中是非常常见的需求，尤其是在布局中。css提供了不同的方法来实现居中，下面我们来看看其中最常见的几种方法。
一、水平居中
1.使用text-align（针对块级元素）
text-align属性可以对块级元素的内部文本实现水平居中，比如p、h1、h2等标签，示例代码如下：
div?{??text-align:?center;}登录后复制2.使用margin（针对块级元素）
margin属性可以对块级元素实现水平居中，将左右margin设置为auto即可，示例代码如下：
div?{??margin:?0?auto;}登录后复制3.使用position和transform（针对块级元素）
position属性和transform属性可以对块级元素实现水平居中，需要将position属性设置为absolute或fixed，再使用transform属性将元素向左平移50%。示例代码如下：
div?{??position:?absolute;??left:?50%;??transform:?translateX(-50%);}登录后复制二、垂直居中
1.使用line-height（针对行内元素）
line-height属性可以对行内元素实现垂直居中，将line-height的值设置为容器的高度即可，示例代码如下：
div?{??height:?100px;??line-height:?100px;}登录后复制2.使用flexbox（针对块级元素）
flexbox是CSS3中引入的一种布局方式，可以轻松实现元素的垂直居中，需要在容器上设置display: flex，再使用align-items: center将元素垂直居中。示例代码如下：
.container?{??display:?flex;??align-items:?center;??justify-content:?center;}登录后复制3.使用position和transform（针对块级元素）
position属性和transform属性也可以实现元素的垂直居中，需要将position属性设置为absolute或fixed，再使用transform属性将元素向上平移50%。示例代码如下：
div?{??position:?absolute;??top:?50%;??transform:?translateY(-50%);}登录后复制总结：
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
