CSS居中完全指南，你学会了吗？

时间：2023-03-12 14:04:39 科技观察

今天就来看看CSS中有哪些方法可以让元素居中！一、水平居中1、行内元素水平居中

(1)text-aligntext-align一般用在块级元素中对齐其中的文本。事实上，应用于块级元素的text-align会水平对齐其包含的内联元素。.container{text-align:center;}2.块级元素水平居中

(1)marginif的高度块元素和宽度已知，可以通过将元素的左右边距值设置为auto来使元素水平居中：.content{width:100px;高度：100px；左边距：自动；margin-right:auto;}如果有多个Block元素，需要将多个元素包裹在一个元素中才能使用该方法实现水平居中：水平居中

水平居中.box{display:flex;左边距：自动；margin-right:auto;}3.概述(1)FlexLayout在flex布局中，justify-content可以用来设置flexbox元素在主轴方向的对齐方式。当其属性值为center时，其子元素将整体位于主轴中心。.container{显示：flex;justify-content:center;}如果flexbox的主轴是垂直的，可以使用align-items代替justify-content实现元素的水平居中：.container{display:flex;flex-direction:columnalign-items:center;}(2)Grid布局在Grid布局中，justify-content属性会将网格容器中的网格沿行轴（水平方向）对齐。当属性值为center时，网格可以对齐到网格容器的水平中心。.container{显示：网格；justify-content:center;}(3)绝对定位可以通过绝对定位和变换实现元素的水平居中：.container{position:relative;}.content{position:absolute;左：50%；transform:translateX(-50%);}如果块元素的宽度已知，也可以使用负边距代替transform:.container{position:relative;}.content{width:100px;位置：绝对；左：50%；margin-left:-50px;}2.垂直居中1.块级元素垂直居中(1)绝对定位可以通过使用绝对定位和变换实现元素的垂直居中：.container{position:relative;}.content{position:absolute;顶部：50%；transform:translateY(-50%);}如果块元素的高度已知，也可以用负边距代替transform:argin-top:-50px;}2.General2.General(1)FlexlayoutInFlex布局中，align-items属性用于定义flex项目位置flex容器当前行在横（纵）轴方向的对齐方式。当其属性值为center时，元素位于容器的中心。.container{显示：flex;align-items:center;}如果将Flex的主轴切换为垂直，则需要使用justify-content而不是align-items来实现元素的垂直居中：.flex{display:flex;弹性方向：列；justify-content:center;}(2)网格布局使用CSS网格布局，您可以使用align-content属性将项目垂直居中到其网格区域。.container{显示：网格；align-content:center;}如果网格的排列方向改为水平，垂直居中仍然有效：.container{display:flex;对齐内容：居中；grid-auto-flow:column;}3.水平垂直居中水平垂直居中（一）最常用的方法绝对定位使元素垂直居中是使用绝对定位和转换：.container{position:relative;}.content{position:absolute;顶部：50%；左：50%；transform:translate(-50%,-50%);}如果元素的高度和宽度已知，也可以使用margin代替transform:.container{position:relative;}.content{width:100px;高度：100px；位置：绝对；顶部：50%；左：50%；顶部边距：-50px；margin-left:-50px;}(2)Flex布局在使用Flex布局时，可以结合上面的水平和垂直居中，实现水平和垂直居中：.container{display:flex;证明内容：居中；align-items:center;}(3)Grid布局在Grid布局中，可以通过如下形式实现元素的水平和垂直居中：.container{display:grid;place-items:center;}place-content属性是align-content和justify-content的简写，当该属性的值为center时，所有子元素在父元素中间堆叠对齐。

上一篇：MySQL事务的隔离是如何实现的？

下一篇：12条VisualStudio调试效率小窍门

CSS居中完全指南，你学会了吗？相关文章