CSS基础知识总结之----居中

最新推荐文章于 2022-02-12 21:34:40 发布

sytloveyxj

最新推荐文章于 2022-02-12 21:34:40 发布

阅读量205

点赞数

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

本文链接：https://blog.csdn.net/sytloveyxj/article/details/107508330

版权

本文总结了CSS中实现水平和垂直居中的多种方法，包括行内元素和块级元素的居中策略，如通过display属性切换元素类型，以及使用line-height、margin、position和flex等技巧。此外，还介绍了各种CSS布局方式在不同场景下的适用性和兼容性问题。

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

1、水平居中

一种是行内元素居中：

<div class='outer'>
    <div class='inner'></div>
</div>

.outer{
  text-algin:center
}

一种是块级元素居中

.inner{
	width:100px;   //width必须设置，不然看不出居中效果
	margin: auto; 
	}

ps:display

块级元素(block)特性：

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul

关注

专栏目录