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中各种居中的问题的更多相关文章

css中关于居中的那点事儿
css中关于居中的那点事儿关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
css中各种居中的奇技淫巧总结
css中各种居中的奇技淫巧总结第一种,在固定布局中比较常用的技巧设置container的margin:0 auto: 第二种(从布局中入手) css .outer{ height:200 ...
css中的居中问题
前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...
CSS中各种居中方法
CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...
CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
css中关于居中的问题
居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...
css中元素居中总结
很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...
css中的居中的方法
一.垂直居中 (1)inline或者inline-*元素 1. 单行文字设置上下padding相等以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...
CSS中的各种居中方法总结
CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...

随机推荐

SpringBoot2 java配置方式 Configuration和PropertySource结合读取配置文件
JdbcConfig.java Configuration是配置文件 PropertySource 引入配置文件 value读取配置文件内容 package cn.itcast.config; imp ...
SharePoint中你不知道的图片库（实战）
分享人:广州华软无名一. 前言以前,在门户网站放一个图片幻灯片时,除了要自己开发实现外,还需要处理上传图片的大小,但在SharePoint中,使用图片库,无需花费时间和精力,就能马上实现. 二. ...
Snapde电子表格编写Exprtk脚本进行数据运算
Snapde,一个专门为编辑超大型数据量CSV文件而设计的单机版电子表格软件:它运行的速度非常快,反应非常灵敏. 一.打开文件:用Snapde打开需要运算的CSV文件二.添加行列:在编辑菜单找到设置 ...
Java-获取年月日对应的天干地支
一.概述本次是以java语言开发为例,计算出年月日对应的天干地支. 二.代码 public class MyDate { /** * 对于年月日的天干地支 */ private int year_g ...
ext组件的查询方式
1.使用id进行查询 (1)Ext.ComponentQuery.query("#mypanel") (2)Ext.getCmp("mypanel") 2.根据 ...
本地服务器硬件信息获取指令wmic
获取BIOS序列号 wmic bios list full | find "SerialNumber" SerialNumber=P50168VB 获取CPUID(WIN32_PR ...
神经网络MPLClassifier分类
代码: # -*- coding: utf-8 -*- """ Created on Fri Aug 24 14:38:56 2018 @author: zhen &qu ...
从0开始的Python学习014面向对象编程
简介到目前为止,我们的编程都是根据数据的函数和语句块来设计的,面向过程的编程.还有一种我们将数据和功能结合起来使用对象的形式,使用它里面的数据和方法这种方法叫做面向对象的编程. 类和对象是面向对象 ...
JavaScript jQuery 中定义数组操作及数组操作
1.认识数组数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象 Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维 ...
Python 之网络式编程
一客户端/服务器架构即C/S架构,包括 1.硬件C/S架构(打印机) 2.软件B/S架构(web服务) C/S架构与Socket的关系: 我们学习Socket就是为了完成C/S的开发二 OSI七 ...

CSS中各种居中的问题