CSS中设置内容居中学习记录

ioszhanghui

于 2019-07-17 07:25:43 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue 居中 CSS

本文链接：https://blog.youkuaiyun.com/ioszhanghui/article/details/96260272

Vue 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了使用CSS实现元素居中的多种方法，包括文本样式、块级元素及内联元素的垂直与水平居中技巧，并提供了具体的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.如果是文本样式，可以通过高度height和行高line-height来实现垂直居中，通过text-align设置水平居中

p { height:30px; line-height:30px; width:100px; overflow:hidden;text-align:center; }

2.如果是块级或者行块级，可以通过设置display:flex；垂直居中 justify-content :center; 排列方向flex-direction: column; 水平居中 align-items: center;

    display :flex;
  /*flex-direction: column;*/
  /*仅仅是垂直居中*/
  justify-content :center;
  /*设置时 水平居中*/
  align-items: center;

3.可以设置父级元素为display:table;子元素为display:table-cell;vertical-align:center;

.block_div2{
width: 30px;
height: 20px;
background: green;
/*内联元素设置*/
/*display: inline;*/
font-size:15px;
/*display: inline-block;*/
display: table-cell;
vertical-align:middle;
}

学习博客：

https://blog.youkuaiyun.com/Evan_QB/article/details/81364257

https://www.cnblogs.com/moqiutao/p/4807792.html

https://blog.youkuaiyun.com/u012863664/article/details/54782492