html的几种水平垂直居中的方式（基础）总结_F11 - 专业站长和开发者的学习网站

分享到

html的几种水平垂直居中的方式（基础）总结

HTML/Xhtml 来源：互联网搜集作者：秩名发布时间：2019-08-24 18:07:47 人浏览

摘要

我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。第一种方法 !--html盒子代码--!--水平垂直居中--div class=Centered1 pd第一种/p/div!-css样式部分-- .Centered1{ background-color:

我们在编写马过程中，想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几种常用的水平垂直居中的方法。

第一种方法

<!--html盒子代码-->
<!--水平垂直居中-->

<div class="Centered1">
    <p>d第一种</p>
</div>

<!-css样式部分-->
   .Centered1{
            background-color: #800070;
            width: 100%;
            height:500px;
            position: relative;
        }
    .Centered1 p{
            width: 200px;
            height: 200px;
            background-color: deeppink;
            line-height: 200px;
            text-align: center;
            position: absolute;
            left: 0;
            bottom: 0;
            right:0;
            top: 0;
            margin: auto;
        }

第二种方法

<!--html盒子代码-->
<!--水平垂直居中-->

<div class="Centered2">
    <p>d第二种</p>
</div>

<!-css样式部分-->
/*第二种方法水平垂直居中*/
    .Centered2{
            background-color: #ef8518;
            width: 100%;
            height: 500px;
            position: relative;
        }
    .Centered2 p {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color:red;
            line-height: 200px;
            text-align: center;
            left: 50%;
            top:50%;
            margin-left:-100px;
            margin-top: -100px;
        }

第三种方法

<!--html盒子代码-->
<!--水平垂直居中-->

<div class="Centered3">
    <p>d第三种</p>
</div>

<!-css样式部分-->
/*第三种方法水平垂直居中*/
    .Centered3{
            background-color: dimgrey;
            width: 100%;
            height: 500px;
            position: relative;
        }
    .Centered3 p {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color:darkorange;
            line-height: 200px;
            text-align: center;
            left: 50%;
            top: 50%;
            transform:translate(-50%,-50%);
        }

第四种方法

<!--html盒子代码-->
<!--水平垂直居中-->

<div class="Centered4">
    <p>d第四种</p>
</div>

<!-css样式部分-->
/*第四种方法水平垂直居中,老版本flex布局*/
    .Centered4{
            background-color: #FF4444;
            width: 100%;
            height: 500px;
            display: -webkit-box;
            -webkit-box-pack:center;
            -webkit-box-align: center;
        }
    .Centered4 p {
            width: 200px;
            height: 200px;
            background-color:cadetblue;
            line-height: 200px;
            text-align: center;
        }

第五种方法

<!--html盒子代码-->
<!--水平垂直居中-->

<div class="Centered5">
    <p>d第五种</p>
</div>

<!-css样式部分-->
/*第五种方法水平垂直居中,新版本的flex水平垂直居中*/
    .Centered5{
            background-color: darkslateblue;
            width: 100%;
            height: 500px;
            display: flex;
            justify-content:center;
            align-items: center;
        }
    .Centered5 p {
            width: 200px;
            height: 200px;
            background-color:fuchsia;
            line-height: 200px;
            text-align: center;
        }

您可能感兴趣的文章 :

原文链接 : https://www.jb51.net/web/689040.html

Tag : HTML(115)

HTML静态页面获取url参数和UserAgent的实现代码

接技术支持小伙伴信：有用户反馈app在华为设备上下载不了，以为是服务器覆盖的范围不够或服务器挂了，直到另一个客服同事发来一个录
html网页引入svg图片的4种方式总结

web应用开发使用svg图片，总结了下，可以有如下4种方式： 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。 1. 直接插入页
html中两种获取标签内的值的方法介绍

获取标签中value的值使用的javascript获取，所以肯定是包含在 script 标签里的，也需要引入jquery 标签示例： 1 input id=goodsCount type=text size=2 re
HTML基本元素标签介绍

一、什么是HTML HTML（Hypertext Markup Language）：即超文本标记语言，是一种用来设计网页的标记语言，用该语言编写的文件，以.html或.htm为后缀
HTML中的表格元素介绍

表格元素的作用：用来格式化显示数据。一、表格的基本结构表格的基本语法: TABLE border=设置表格边框尺寸大小 width= cellpadding= cellspaning
HTML中的表单元素介绍

表单元素概述表单（Form），用于收集用户信息、提交用户请求等处理过程 1、设计表单，并放入一些输入域 2、网站访问者在自己的计算机
HTML怎么设置下划线？html文字加下划线方法

HTML中的下划线曾经是将文本包含在u/u标签中的问题，但是这种方法已被放弃，而更倾向于使用更多功能的CSS。一般来说，下划线被认为是引
关于HTML编码导致的乱码问题介绍

今天一个学弟问了一个问题，它写的HTML代码打开显示的是乱码。然后就给我发来了代码。就一个HTML文件和一个文件夹，打开一看，很简单
纯html+css实现Element loading效果的代码

这是 Element UI loading 组件的效果图，看起来很酷，我们来实现一下！分析动画由两部分组成：蓝色的弧线由点伸展成一个圆，又从圆收缩成
HTML+CSS实现导航条下拉菜单的代码

代码中的图片可以自己换的下拉菜单HTML代码 header class=header div class=header_left img src=img/logo.jpg /div div class=header_right div class=number_right img src