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. JQ的.serialize()

    前面写的都是用Form表单提交,但是VUE.JS好像不能控制Form的Action. 于是就用AJAX来提交,但是跳转地址(window.location.href=)会暴露数据在url上,就直接用s ...

  2. vue中v-text / v-html

    vue中v-text / v-html使用 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. IE中iframe标签显示在DIV之上的问题解决方案

    在做网页时前端时,使用IE打开时会出现标题栏DIV被遮挡PDF遮挡, 后在stackoverflow中查到是IE浏览器的问题:链接https://stackoverflow.com/questions ...

  4. java工作流引擎证照库类型的流程设计 实现方案与演示案例

    关键词:.Net开源工作流    工作流引擎   工作流引擎常用信息存储  流程前置导航 证照库的概念&应用场景: 我们在梳理流程的时候,会发现有一些流程的发起是基于一个实体信息的. 比如:纳 ...

  5. arcgis api 3.x for js 热力图优化篇-不依赖地图服务（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  6. 【Android】用Cubism 2制作自己的Live2D——初探Live2D在Android上的运行！

    前言- 上一次我们成功运行了官方给我们的样本,是不是很有干劲啊?!这次我们就来看看Live2D是怎么在手机上运行的! 准备- 上次运行成功的官方样本——第一次我们先看简单的,就是那个名字叫Sample ...

  7. 【已采纳】charles工具使用心得

    1.下载charles 可以去charles官网下载,下载地址:http://www.charlesproxy.com/download/    根据自己的操作系统下载对应的版本,然后进行安装,然后打 ...

  8. Debain/Ubuntu/Deepin 下使用 ss

    如果你有一台 ss 的服务器,在 Debian Like 的环境下要如何***呢? 安装 ss 客户端 如果还没安装 pip 就得先安装 sudo apt-get install python-pip ...

  9. Git - git status - 查看当前仓库状态

    索引: 目录索引 参看代码 GitHub: git.txt 一.示例: git status 二.说明: 1."status" 部分 该命令可以查出当前分支文件变更状态, 可以查出 ...

  10. 一天一个Linux命令--nmcli

    nmcli命令连接和删除SSID nmcli d wifi                                                                        ...