[分享]css中居中的代码怎么写

CSS 中的居中是常用的布局样式，它可以让页面元素在水平和垂直方向上都居中于父容器中。在实际开发中，有多种方式可以实现居中的效果。下面就来介绍一下两种常见的居中方式，并附带相应的 CSS 代码。一、水...

CSS 中的居中是常用的布局样式，它可以让页面元素在水平和垂直方向上都居中于父容器中。在实际开发中，有多种方式可以实现居中的效果。下面就来介绍一下两种常见的居中方式，并附带相应的 CSS 代码。
一、水平居中
1. 使用 text-align:center;
这种方式适用于将文本、行内元素和表格单元格水平居中。下面是一个示例：

文本居中

2. 使用 margin:auto;
这种方式适用于将块级元素水平居中，需要将宽度设定为固定值或百分比。下面是一个示例：

div {
  width: 200px;
  margin: auto;
} 

二、垂直居中
1. 使用 line-height 和 height
这种方式适用于将单行文本垂直居中。需要将元素的高度设置为行高的值。下面是一个示例：

p {
  height: 40px;
  line-height: 40px;
} 

2. 使用 flexbox
这种方式适用于将任何元素垂直居中。需要将父容器的 display 属性设置为 flex，并将子元素的 align-items 属性设置为 center。下面是一个示例：

div {
  display: flex;
  align-items: center;
  height: 200px;
} 

以上就是 CSS 中常用的居中方式及相应的 CSS 代码。在实际开发中，根据实际需求与场景选择合适的方式，能够快速实现页面元素的居中效果，提升页面布局的美观程度。