1.元素水平居中

1.1 在父元素上使用text-align: center;

father {

    text-align: center;

}

1.2 margin: 0 auto;

在上一个问题中，我们说过，块级元素的特性是自动在宽度上填充父元素，有内容的地方自然是内容，而其余的地方使用margin填充。因此我们可以利用左右相等的margin来使元素居中。

<style type="text/css">

        #container {

            height: 100px;

            background: gray;

        }

        #testDiv1{

            height: 100px;

            margin: 0 auto;

            width: 100px;

            background: black;

        }

</style>

<body>

    <div id="container">

        <div id="testDiv1"></div>

    </div>

</body>

1.3 多个块级元素在一行内居中

众所周知，行级元素不能设置宽高，只能根据内容决定大小，那么想让多个块级矩形居中要怎么做呢？

块级元素独占一行，要怎么才能不独占呢？

可以设置成行内块级 inline-block，然后父元素给text-align：center

<style type="text/css">

        #container {

            text-align: center;

            height: 100px;

            background: gray;

        }

        .mydiv {

            display: inline-block;

            width: 100px;

            height: 100px;

            background: red;

        }

</style>

<body>

    <div id="container">

        <div class="mydiv"></div>

        <div class="mydiv"></div>

        <div class="mydiv"></div>

    </div>

</body>

1.4 设置距离左边50%，再用负margin拉回去

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2.垂直居中

2.1 单行行内元素居中

思路：设置display为inline-block，并给出行高等于元素高度

<head>

    <style>

        div {

            width: 200px;

            height: 200px;

            background: rgb(30, 186, 250);

        }

        /*设置父块大小及颜色*/

        div a {

            text-decoration: none;

            font-size: 25px;

            color: rgb(254, 7, 183);

            font-weight: 700;

            line-height: 200px;

        }

        /*设置内联元素的行高等于父块高度的行高即可实现垂直居中*/

    </style>

</head>

<body>

    <div><a href="#">测试链接</a></div>

</body>

2.2 设置距离父元素50%，再用margin拉回去

<!DOCTYPE html>

<html lang="zh">

<head>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        body {

            height: 95vh;

        }

        .test{

            height: 100px;

            width: 100px;

            background: red;

            position: absolute;

            top: 50%;

            margin-top: -50px;

        }

    </style>

</head>

<body>

    <div style="height: 600px">

        <div class="test">

        </div>

    </div>

</body>

</html>

若想基于视口的垂直居中可将relative换为absolute

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

2.3 table-cell + vertical-align:middle

设置父元素display为table-cell，并给vertical-align: middle;

3 我最喜欢的方法，flex布局天下第一！

总结：垂直 + 水平居中示例

需求，在页面最中间显示一个button。

<!DOCTYPE html>

<html lang="zh">

<head>

    <style>

        body {

            height: 100vh;

            margin: 0;

            padding: 0;

            text-align: center;

        }

        /* button {

        } */

        span {

            display: inline-block;

            height: 100vh;

            line-height: 100vh;

        }

        a {

            text-decoration: none;

            padding: 10px 20px;

            border-radius: 5%;

            box-shadow: 0 2px 5px rgba(0, 0, 0, .3);

        }

    </style>

</head>

<body>

    <span>

        <a href="">click me</a>

    </span>

</body>

</html>

效果：

或者用 flex布局一键解决！

CSS中各种居中的问题的更多相关文章

  1. css中关于居中的那点事儿

    css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...

  2. css中各种居中的奇技淫巧总结

    css中各种居中的奇技淫巧总结   第一种,在固定布局中比较常用的技巧设置container的margin:0 auto:   第二种(从布局中入手)   css .outer{ height:200 ...

  3. css中的居中问题

    前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...

  4. CSS中各种居中方法

    CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...

  5. CSS中各种各样居中方法的总结

    在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...

  6. css中关于居中的问题

    居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...

  7. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

  8. css中的居中的方法

    一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...

  9. CSS中的各种居中方法总结

    CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...

随机推荐

  1. Linux高级运维 第三章 Linux基本命令操作

    3.1  Linux终端介绍.Shell提示符.Bash基本语法 3.1.1  登录LINUX终端 两种终端仿真器:1.GNOME桌面的GHOME Terminal : 2.KDE桌面的Konsole ...

  2. 用python写一个北京市的个税计算器

    #应纳税的钱:税前收入-5000元(起征点)-专项扣除(五险一金等) #工资个税的计算公式为: #个人所得税=应纳税的钱×适用税率-速算扣除数 ''' 1.全月应纳税所得额不超过3000元: 税率:3 ...

  3. ubuntu 安装vm-tool

    1.“虚拟机”->“安装vmware tools”VMware tools 2. 新建一个文件夹 ,打开vmware tools安装介质.右键选择vmwaretools的gz压缩包,选择“提取到 ...

  4. 观察者模式与.Net Framework中的委托与事件

    本文文字内容均选自<大话设计模式>一书. 解释:观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够 ...

  5. 测者的测试技术手册：Java中的null类型是测试不可超越的鸿沟

    null是一个非常非常特殊的类型,对于每一个测试人员都要十分小心null的存在的可能性.同时null也让很多RD头疼,甚至连Java的设计者都成人null是一个设计失误.这篇文章,测者想聊聊这个让很多 ...

  6. powershell-脚本运行权限政策

    获取当前策略:Get-ExecutionPolicy 设置当前策略:Set-ExecutionPolicy Unrestricted Restricted——默认的设置, 不允许任何script运行 ...

  7. [转]Lua和Lua JIT及优化指南

    一.什么是lua&luaJit lua(www.lua.org)其实就是为了嵌入其它应用程序而开发的一个脚本语言, luajit(www.luajit.org)是lua的一个Just-In-T ...

  8. python3 re模块正则匹配字符串中的时间信息

    匹配时间: # -*- coding:utf-8 -*- import re def parseDate(l): patternForTime = r'(\d{4}[\D]\d{1,2}[\D]\d{ ...

  9. centos 7 selinux开启关闭

    1 查看selinux状态 [root@localhost ~]# sestatus SELinux status: disabled 2 关闭 零时关闭 [root@localhost ~]# se ...

  10. SQL 行转列的运用

    适用场景:需要将行数据转换成列数据 例子: 现在有一个学生的成绩表 但是我们需要将每个学生的成绩汇集到一条数据上,这时候就可以用到行转列. 代码如下 一.不使用  PIVOT SELECT ),[St ...