20170808- css 居中

Dongjie_Liu 发布于2019-08-29 13:07 / 2644人阅读

摘要：拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它注意上面的例子中必须为元素设置宽度，并且宽度必须小于父容器的宽度绝对定位实现垂直居中或者自身高度的一半

水平居中 行内或类行内元素水平居中

在块级父容器中设置text-align:center

块级元素水平居中

块级元素设置margin-left和margin-right为auto（前提是已经为元素设置了width）

flex布局实现（多个水平排列元素）水平居中

display: flex;
justify-content: center;

flex布局实现（多个垂直排列元素）水平居中

display: flex;
flex-direction: column;
align-items: center;

绝对定位实现水平居中

width: 宽度值;
position: absolute;
left: 50%;
transform: translateX(-50%); 或者 margin-left: -宽度值的一半;

垂直居中 单行行内元素或单行类行内元素垂直居中

设置父容器的height和line-height为相同的值

height: 50px;
line-height: 50px;

使用table-cell多行文本垂直居中


  React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它

.container {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;
}

使用flex实现垂直居中

display: flex;
flex-direction: column;
justify-content: center;

或者

display: flex;
align-items: center;

利用伪元素实现垂直居中


  React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它

注意：上面的例子中必须为p元素设置宽度，并且宽度必须小于父容器的宽度

.container {
  width: 200px;
  height: 200px;
  border: 1px solid;
  text-align: center;
}
.container p {
  width: 190px;
  display: inline-block;
  vertical-align: middle;
}
.container:after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}

绝对定位实现垂直居中

position: absolute;
top: 50%;
transform: translateY(-50%); 或者 margin-top: -自身高度的一半;

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

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

20170808 - 跨浏览器的事件兼容处理程序

摘要：第三个参数表示在冒泡阶段调用事件处理程序，默认值为中的事件对象事件处理程序当前程序绑定的那个元素事件处理程序内部，的值始终等于的值事件发生的具体元素事件类型取消事件的默认行为取消事件的进一步捕获或冒泡中的事件对象事件类型阻止事件进一步冒泡取 var EventUtil = { addHandler: function(element, type, handler){ if(...

1treeS 2019-08-20 18:36 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 评论0 收藏0
【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行内元素解决方案适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 评论0 收藏0