css居中总结

supernavy 发布于2019-08-29 12:31 / 1016人阅读

摘要：一水平居中系列或者元素等有效一个块级元素多个块级元素使用和配合或者使用二垂直居中系列或者元素单行上下添加相等的内边距多行可以模拟表格可以使用块级元素知道块级元素的高度不知道块级元素的高度使用

一、水平居中系列

inline或者inline-*元素

</>复制代码 
.center-children {
    text-align: center;
}

inline、inline-block、inline-table、inline-flex等有效

一个块级元素

</>复制代码 
.center{
 margin:0 auto;   
 }

多个块级元素

使用inline-block和text-align配合或者使用flex

二、垂直居中系列

inline或者inline-*元素
1、单行：上下添加相等的内边距

</>复制代码 
.link {
    padding-top: 30px;
    padding-bottom: 30px;
  }

2、多行：

</>复制代码 
// 可以模拟表格
.center-table{
  display:table;
}
.center-table children{
  display:table-cell;
  vertical-align:center;
}

</>复制代码 
// 可以使用flexbox
.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
 }

块级元素

知道块级元素的高度

</>复制代码 
.parent {
  position: relative;
 }
 .child {
   position: absolute;
   top: 50%;
   height: 100px;
   margin-top: -50px;                                
   box-sizing: border-box; */
 }

不知道块级元素的高度

</>复制代码 
.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: 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%);
}

使用flexbox

</>复制代码 
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
css居中总结

摘要：前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。又必须有个父级对其进行设置居中。前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。水平居中行内元素水平居中行内元素的居中比较简单，直...

gxyz 2019-08-30 15:55 评论0 收藏0
CSS居中方法总结

摘要：此时检查元素即可即可实现内层的实现了居中这种方式是最为我们熟知的，其缺点是需要设置子元素的宽度。交叉轴居中当设置了属性时，主轴的方向会改变。垂直居中实现方案用的属性，以及定位，与上面的水平居中类似，只是改为即可。水平居中实现方案确定宽度的元素水平居中 1.我们可以通过给该元素的父级设置margin: 0 auto的方式来实现。HTML: ...

ralap 2019-08-30 13:07 评论0 收藏0
CSS水平垂直居中总结

摘要：垂直居中表格布局法为什么就能垂直居中拜读了张鑫旭大神的文章行高指的是什么行高指的是文本行的基线间的距离。行内框具有垂直居中性。 CSS水平居中、垂直居中、水平垂直居中方法总结文字的水平居中: text-align:center; 单行文字的垂直居中： line-height:30px; height:30px; 让有宽度的div水平居中： margin: 0 auto; width:...

mist14 2019-08-30 13:13 评论0 收藏0
对css居中的一点总结

摘要：为了更好的加深对居中的理解，搜集和阅读相关资料，发现不错的文章将其整理出来。在学习前端的过程中，发现元素和文本的水平居中和垂直居中，是经常会出现的问题，在实际工作中也会经常碰到。居中的技巧有很多，但在编写代码的过程中，发现有时候技巧管用，有时候不管用，于是就将每个知道的方案都试一遍，找到合适的。这种情况究其原因是对居中的认识不够深入，只是停留在实现需求的水平上。为了更好的加深对居中的...

BenCHou 2019-08-29 11:17 评论0 收藏0