!
也想出现在这里? 联系我们
全球五大数据中心,CYUN提供海外优质服务器,CN2优化线路,为您的业务推进提供强大助力

怎么居中? - CSS笔记

居中问题需要用到的方法。CSS没有那么复杂困难不同的情景解决不一样

居中是在中经常被抱怨的问题之一。这个问题真的有这么难吗?事实上这个问题并,它在于对于,居中问题需要用到的方法。CSS没有那么复杂困难不同的情景解决不一样,在这里,我们会一起建立来帮助大家来这个问题。

水平居中

行内元素

display属性为 或者 行内元素?(例如:文本或者链接)inlineinline-*

如果你需要居中的在中,你可以使用下面方法。行内元素块级元素

.center-children {
	text-align: center;
}
例子:传送门

单个 - 块级元素

如果需要使得,可以利用和。块级元素居中margin-leftmargin-right
.center-me {
	margin: 0 auto;
}
例子:传送门
注意:不能是一个浮动的块级元素哦~

多个 - 块级元素 - 同行居中

如果需要使得,这个时候用 可就不行啦,但是我们可以使用或者来实现居中。多个块级元素居中magininline-blockflexbox
inline-block

适合一个父div中两个子div居中

利用在中的居中方法,先让的变为行内元素,再对的使用居中。行内元素块级元素内部块级元素父级块级元素

.center-parent {
	text-align: center;
}
.center-parent .center-child{
	display: inline-block;
}

例子

我是内容文本1
我是内容文本1
我是内容文本1
flexbox
.center-parent {
	display: flex;
	justify-content: center;
}
例子:传送门

多个 - 块级元素 - 同列居中

#####利用的方法,来实现的。单个块级元素居中多个块级元素垂直居中

.center-me {
	margin: 0 auto;
}
例子:传送门

垂直居中

单行 - 行内元素

display属性为 或者 行内元素?(例如:文本或者链接)。可以利用或者来实现。inlineinline-*paddingline-height
padding
.text {
	padding-top: 30px;
	padding-bottom: 30px;
}
例子:传送门
line-height (值和一样)height
.text {
	height: 100px;
	line-height: 100px;
}
例子:传送门

多行 - 行内元素

对于多行,如果使用的方法,在换行之后,会出现错误。这个时候可以利用的或者或者来实现。行内元素单行表格vertical-alignflexbox伪类
vertical-align
.center-table {
	display: table;
}
.center-table p {
	display: table-cell;
	vertical-align: middle;
}
例子:传送门
flexbox
.center-flexbox {
	display: flex;
	justify-content: center;
	flex-direction: column;
}
例子:传送门
伪类
.center-parent {
	position: relative;
}
.center-parent::before {
	content: "";
	display: inline-block;
	height: 100%;
	width: 1%;
	vertical-align: middle;
}
.center-parent p {
	display: inline-block;
	vertical-align: middle;
}
例子:传送门

块级元素

元素高度知道
.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	height: 100px;
	margin-top: -50px; // 高度的一半
}
例子:传送门
元素高度不知道
.parent {
	position: relative;
}
.child {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
例子:传送门
flexbox
.parent {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
例子:传送门

垂直水平居中

宽度和高度知道(利用的高度知道)垂直居中块级元素
.parent {
  position: relative;
}

.child {
  width: 200px;
  height: 100px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -50px 0 0 -100px;
}
例子:传送门
宽度和高度不知道(利用的高度不知道)垂直居中块级元素
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
例子:传送门
flexbox
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

相关文章:

怎么居中? - CSS笔记-Npcink
怎么居中? - CSS笔记-Npcink

怎么用css实现水平垂直绝对居中? - css笔记

我们常常需要让某个div块或是文本水平垂直绝对居中,那么,都有哪些方法呢?这一次的css笔记分享下怎么用css实现水平垂直绝对居中

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
css

彩色渐变边框按钮 - CSS笔记

2020-5-28 11:19:35

css

怎么用纯CSS实现瀑布流布局? - CSS笔记

2020-5-30 9:18:30

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索