CSS居中对齐

XFLY 发布于2019-08-29 13:52 / 3399人阅读

摘要：水平居中子元素为行内元素子元素为块级元素多个块级子元素垂直居中单行子元素空格不换行多行子元素可变换大小块级子元素知道子元素高度不知道子元素高度水平垂直居中知道子元素的宽高子元素的没有固定的宽高

https://css-tricks.com/center...
https://segmentfault.com/a/11...

水平居中 子元素为行内元素

.center-children {
  text-align: center;
}

子元素为块级元素

.center-me {
  margin: 0 auto;
}

多个块级子元素

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

.flex-center {
  display: flex;
  justify-content: center;
}

垂直居中 单行子元素

.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;  //空格不换行
}

多行子元素

.center-table {
  display: table;
}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  resize: vertical;  //可变换大小
}

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

块级子元素 知道子元素高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

不知道子元素高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平垂直居中 知道子元素的宽高

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

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

  margin: -70px 0 0 -170px;
}

子元素的没有固定的宽高

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

body, html {
  height: 100%;
  display: grid;
}
span {
  margin: auto;
}

GPU云服务器云服务器图片html居中对齐 html居中对齐h html5行居中对齐 html居中css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112760.html

《CSS世界》笔记三：内联元素与对齐

摘要：上一篇世界笔记二盒模型四大家族下一篇世界笔记四流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的，而头疼不已。上一篇：《CSS世界》笔记二：盒模型四大家族下一篇：《CSS世界》笔记四：流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已...

HtmlCssJs 2019-08-29 16:19 评论0 收藏0
css对齐方案总结

摘要：核心代码利用布局利用布局，其中用于设置或检索弹性盒子元素在主轴横轴方向上的对齐方式而属性定义子项在容器的当前行的侧轴纵轴方向上的对齐方式。核心代码相对于的水平垂直居中列表布局兼容性好核心代码布局核心代码css对齐方案总结垂直居中通用布局方式(内敛元素和块状元素都适用) 利用flex:核心代码: 12345 .container{ display:flex; ...

marek 2019-04-23 11:45 评论0 收藏0
css两种垂直居中对齐解决方案

第一种垂直居中方法利用vertical-align：middle进行垂直方向上的居中对齐，此方法需要满足的条件：设置父元素的行高line-height等于父元素height的高度子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align：middle 此方法在开发中不能右浮动(不能靠右边) 下方是完整代码，可以新建一个HTML文件进行测...

elarity 2019-08-02 16:15 评论0 收藏0
css两种垂直居中对齐解决方案

第一种垂直居中方法利用vertical-align：middle进行垂直方向上的居中对齐，此方法需要满足的条件：设置父元素的行高line-height等于父元素height的高度子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align：middle 此方法在开发中不能右浮动(不能靠右边) 下方是完整代码，可以新建一个HTML文件进行测...

ztyzz 2019-08-29 18:46 评论0 收藏0
vertical-align属性与垂直居中

摘要：方法二利用，设置元素结构，并应用实现垂直居中，这种方法的实现可用于多行文本，要求及以上版本。让元素居中对齐是非常常见的需求，首先是水平居中，要实现水平居中行内元素只需要在其父元素上设置text-align: center即可，对于块级元素来说让它的margin-left: auto和margin-right: auto即可（width不可为auto），那么垂直居中呢？找下css属性发...

bergwhite 2019-08-28 18:11 评论0 收藏0