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. 变量类型、构造器、封装以及 LeetCode 每日一题

    1.成员变量和局部变量 1.1成员变量和局部变量定义 成员变量指的是类里面定义的变量(field),局部变量指的是在方法里定义的变量. 成员变量无须显示初始化,系统会自动在准备阶段或创建该类的实例时进 ...

  2. Java开发笔记（八十一）如何使用系统自带的注解

    之前介绍继承的时候,提到对于子类而言,父类的普通方法可以重写也可以不重写,但是父类的抽象方法是必须重写的,如果不重写,编译器就直接在子类名称那里显示红叉报错.例如,以前演示抽象类用法之时,曾经把Chi ...

  3. JS之BOMBOM！

    什么是BOM? bom即browser object model 也就是浏览器对象模型,BOM由多个对象组成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象. 顶层 ...

  4. SSM框架多数据源和AOP事务管理之间

  5. 借书证信息管理系统，C语言实现

    自己实现的如有缺漏欢迎提出 /* 原创文章 转载请附上原链接: https://www.cnblogs.com/jiujue/p/10325628.html   */ 设计内容: 设计一个排序和查找系 ...

  6. SQL SERVER 2012 AlwaysOn– 数据库层面 02

    搭建 AlwaysOn 是件非常繁琐的工作,需要从两方面考虑,操作系统层面和数据库层面,AlwaysOn 非常依赖于操作系统,域控,群集,节点等概念: DBA 不但要熟悉数据库也要熟悉操作系统的一些概 ...

  7. C#自定义控件添加到工具箱

    1.在需要使用这个自定义控件的项目中,在引用中,右键,添加引用,浏览,找到dll(如:ComButton.dll),进行添加,这时候,控件应该是能够自动添加到工具箱的. 2.在Visual Studi ...

  8. SpringMVC的相关知识

    前几天学习了SpringMVC 感觉比Servlet好用得多具体如下: 首先SpringMVC的概念: SpringMVC是一个前端控制框架,主要用来负责与页面的交互.SpringMVC是Spring ...

  9. Python之Pandas的一些理解

    Pandas的功能: 1.  结构化的数据分析; 相比excel,可以处理更大量的数据和更好的性能 2.  对数据的清洗

  10. phpdocumentor 安装以及使用说明

    一  缘由 最近改版公司网站和app端的api,发现很多函数和方法都没写注释,搞得每次调用之前还需要看底层实现,有的方法名和功能还类似,区分不出使用哪个最优!为了避免给后人挖坑,除了将代码写得规范外, ...