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. 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法

    一,制作U盘启动盘 随着个人电脑的“飞入寻常百姓家”,喜欢DIY电脑的发烧友们也越来越多. 安装系统是DIY最基本的要求,很容易做到: 那么如果要求用U盘装系统呢,你可能会说简单,直接下载个老毛桃或是 ...

  2. C#保留2位小数几种场景总结

    场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25.可不可以刚好保留到最后一位不是 ...

  3. Java虚拟机判定对象存活算法

    1.引用计数算法 描述:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1:当引用失效时,计数器值就减1:任何时刻计数器值为0的对象就是不可能再被使用的. 特点:实现简单,判定效率高. ...

  4. SpringMVC之入门程序

    SpringMVC之入门程序——使用浏览器展示商品数据 springMVC执行流程(图片来源:https://www.jianshu.com/p/8a20c547e245) 1.创建pojo(商品实体 ...

  5. 利用data-src属性 更换图片

    <div class="img_src"> <img src="./images/luo.png"></div> <u ...

  6. 项目实战工具类（二）：ZipUtils(压缩/解压缩文件相关)

    import android.content.Context; import android.util.Log; import java.io.File; import java.io.FileInp ...

  7. vivo7.0以上系统如何无需Root激活Xposed框架的方法

    在较多公司的引流或者业务操作中,基本都需要使用安卓的黑高科技术Xposed框架,几天前我们公司购买了一批新的vivo7.0以上系统,基本都都是基于7.0以上版本,基本都不能够获取Root的su超级权限 ...

  8. JPA实现复杂条件分页查询

    相信熟悉Hibernate的人对于ORM给编程带来的便利于快捷一定不陌生,相对于MyBatis等需要编写复杂的SQL语句,ORM映射为我们带来的便利显而易见.但是,在获得便利的同时,失去的便是灵活性, ...

  9. Python 进程（一）理论部分

    进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行,即正在运行的程序,是系统进行资源分配和调度的基本单位,进程是对正在运行程序的一个抽象,在早期面向进程设计的计算机结构中,进程是程 ...

  10. kali的网络服务

    1.启动Apache: service apache2 start 关闭: service apache2 stop 将Apache2服务添加到自动启动的程序组里: update-rc.d apach ...