水平居中

(1)内联元素:

text-align: center;

利用 text-align: center ;可以实现在块级元素内部的内联元素水平居中。

如果一行中有多个块级元素,可以通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

注意:此方法对内联(inline), 内联块(inline-block),内联表(inline-table), 内联块级弹性盒(inline-flex)元素水平居中都有效。

(2)块级元素:

margin: 0 auto;

注意:当块级元素的宽度固定时,可通过margin: 0 auto;使块级元素水平居中。(未定宽度,居中无效)

(3)绝对定位+2D平移:

position: absolute;

left:50%;

transform: translateX(-50%);

注意:当块级元素的宽度不固定时,可通过绝对定位配合2D平移(平移相对于自身宽高的百分比),使块级元素水平居中。

(4)弹性盒子使用justify-content属性:

display: flex;

justify-content: center;

注意:需将父盒子设置为弹性盒子,利用justify-content 属性(用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式)实现水平居中。

垂直居中

(1)内联元素:

vertical-align:middle;

vertical-align是用来指定内联元素或者表格单元格元素的垂直对齐方式。

可被用于:使内联元素盒模型与其内联元素容器垂直对齐。用于垂直对齐一行文本的内的图片,垂直对齐表格单元内容。

注意:使用vertical-align要清楚基线、边界的概念

vertical-align只对内联元素(inline、inline-block、inline-table)、表格单元格元素(table-cell)生效。不能用它垂直对齐块级元素。

(2)行高与高度一致:

line-height: **px;

height: **px;

内联元素的高度(height)和行高(line-height)相等时,元素垂直居中。

(3)块级元素:

position: absolute;

top: 50%;

height: 100px;

margin-top: -50px;

注意:当块级元素的高度固定时,通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,使块级元素垂直居中。

(4)绝对定位+2D平移:

position: absolute;

top: 50%;

transform: translateY(-50%);

注意:当块级元素的高度不固定时,可通过绝对定位配合2D平移(平移相对于自身宽高的百分比),使块级元素垂直居中。部分浏览器存在兼容性的问题。

(5)弹性盒子使用 align-items属性:

display: flex;

align-items: center;

注意:需将父盒子设置为弹性盒子,利用align-items 属性(用于设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式)实现垂直居中。

(6)利用表布局(table)

display:table;

display:table-cell;

注意:父容器设为display:table让他成为一个块级表格元素,子元素display:table-cell使子元素成为表格单元格,

然后就像在表格里一样,给子元素加个vertical-align: middle就行了,多行文字垂直居中。(常规的登录及注册页面都需要用到)

(7)精灵元素(ghost element)技术

.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; width: 20rem;
}

在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的。个人认为本质就是第(1)种方法。

水平垂直居中

(1)固定宽高

.parent {
    position: relative;
} .child {
    position: absolute;     top: 50%;     left: 50%;     margin: -50px 0 0 -50px;
    width: 100px;

    height: 100px;
}

(2)不定宽高

.parent {
    position: relative;
} .child {
    position: absolute;

    top: 50%;     left: 50%;     transform: translate(-50%, -50%);
}

(3)利用flex布局

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

(4)利用grid布局(兼容性较差,不推荐)

.parent {
height: 140px;

display: grid;
}
.child {
margin: auto;
}

(5)利用表布局(table)

.outer {
display: table;

position: absolute; height: 100%; width: 100%;
} .middle {
display: table-cell; vertical-align: middle;
} .inner {
margin-left: auto; margin-right: auto; width: 400px;
}

————————————————
资料参考:

CSDN博主「微个日光日」
原文链接:https://blog.csdn.net/xiebaochun/article/details/89838522

简书博主「Iam_Bling
 原文链接:https://www.jianshu.com/p/ce7e4a997a2c

前端小白,有哪些不足的地方,希望大家多多指教

前端基础问题:CSS居中的几种方式的更多相关文章

  1. CSS居中的几种方式总结

    1.水平居中的 margin:0 auto; 这个是用于子元素上的,前提是不受float影响 <style type="text/css"> .box{ width: ...

  2. css居中的几种方式

    居中分水平和垂直两种,使用的频度也算是很高,下面分情况来讨论一下几种常用的实现方式. 欢迎指正文中的错误,同时如果有学习到新的方式也会更新在后面,也方便以后温故知新. 1.margin 这种方式只能实 ...

  3. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  4. 前端基础:CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  5. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  6. HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者 内部引用方式1: 直接在标签内用 style 引用,如: <div ...

  7. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  8. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

随机推荐

  1. Linux线程-pthread_join

    pthread_join用来等待另一个线程的结束,函数原型如下: extern int pthread_join __P ((pthread_t __th, void **__thread_retur ...

  2. ASP.NET 5中的静态文件处理

    ASP.NET 5 与之前的 ASP.NET 相比,有着翻天覆地的变化.了解与熟悉它需要一个过程,而我选择的了解方式是一步一步从无而有手写一个简单的 ASP.NET 5 程序,然后根据遇到的问题进行学 ...

  3. 抛弃阿里云,中国用户购买海外VPS的五个理由

    王掌柜在过去的五年多时间里,折腾过不少vps品牌,最开始玩的是一年一百多块钱的香港虚拟主机,后来业务量大了,开始折腾国内的小鸟云.阿里云.腾讯云.电信云.百度云主机,国外的linode\interse ...

  4. 在VS2017下配置OpenGL

    这个方法适合初学者使用,较为简单方便. 第一,你的VS2017一定要安装了C/C++开发组件 可以打开Visual Studio Installer来查看 另外,确定你有安装NuGet包管理器,在单个 ...

  5. [leetcode]61. Rotate List旋转链表

    Given a linked list, rotate the list to the right by k places, where k is non-negative. Example 1: I ...

  6. &lt;&lt;、|=、&amp;的小例子

    1. << 移位符 0x1 << 1  表示向左移1位 0x1二进制为:0001 左移1位:0010 效果: 2. | 按位或运算, & 按位与运算 enum STAU ...

  7. Swift1.2与Xcode6.3 beta

    Xcode6.3和Swift1.2都已经发布.这次发布增强了Swift编译器也给Swift增加了一些新的特性.详细内容可以看这里.这里主要关注比较重要的内容. 编译器的改进 Swift1.2的编译器更 ...

  8. 关于Cocos2d-x对象的定义和创建

    游戏可以包含很多个场景,每个场景又包含很多的层,每个层又包含很多的节点,这些节点,层,场景都可以看成一个一个的对象,我们把每一个彼此不同但又是同类型的对象归为一个类,为它创建一个单独的类,这个类有这些 ...

  9. swift开发之 -- ? 和 ! 的作用

    记录下这个知识点: 一般我们在一下两种情况会遇到 ? 和 !的使用 1,声明变量时 var number:Int? var str:String? 2,在对变量进行操作时 number?.hasVal ...

  10. {sharepoint} SetPermission

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsof ...