酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

html

旗下栏目: html css xml html5 DW bootstrap Frontpage教程

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

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-08-24
本篇文章主要介绍了html的几种水平垂直居中的方式(基础)总结,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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

第一种方法
 

 
<!--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

相关文章

  • 详解网页编码之GB2312、GBK与UTF-8的区别

    详解网页编码之GB2312、GBK与UTF-8的区别

    首先,我们要明白,GB2312、GBK和UTF-8都是一种字符编码,除此之外,还有好多字符编码。只是对于我们中国人的网站来说,用这三种编码 比较多。简单的说一下,为什么要用编码,在计算机内,储存文本信息用ASC II码,每一个字符对应着唯一......
    12-22
  • 解决使用html2canvas对有百度地图的Dom元素处理成图片

    解决使用html2canvas对有百度地图的Dom元素处理成图片

    问题1:百度地图应用的是瓦片式图片(地图是一张张图片拼出来的),html2canvas 处理时,遇到非同一域名下的图片,浏览器会显示跨域的报错,也无法用反向代理来解决,因为瓦片图片的域名不确定,无法指定 proxy_pass 解决 :使用百度地图......
    10-14
  • html/css中float浮动的用法示例教程

    html/css中float浮动的用法示例教程

    一、float基础用法示例 1、我们先建两个div盒子,设置高度、宽度和背景颜色; 最开始两个盒子在网页上的位置如下: 然后我们将红色盒子浮动到右边 然后我们会发现红色盒子浮动到了右边,但是蓝色盒子就直接上移到了原先红色盒子的位置。 ......
    09-10
  • html的几种水平垂直居中的方式(基础)总结

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

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

    HTML中的if判断用法解析

    在django的web开发过程中,编写html时,从后端传入同名列表变量,但是内容格式有所区别,需要分别判断,查阅了很多文章试了好几种方法,格式似乎都不太对(本人没有系统学习过前端,基本都是照葫芦画瓢)后来找到django框架下html的if用......
    08-24
  • HTML实现检测输入已完成功能的方法

    HTML实现检测输入已完成功能的方法

    使用onInput(event)检测是否在输入 使用onporpertychange=onChange(event)检测是否内容发生改变 使用onBlur=finnishInput(event)检测是否失去焦点 可以通过先检测是否在输入,记下状态,如果上次在输入信息,然后失去焦点,则可以判断为......
    04-18
  • main标签的作用介绍

    main标签的作用介绍

    本篇文章介绍main标签的作用。 main标签的作用是什么? main标签规定文档的主要内容,main的主要目的是将ARIA的地标性作用main映射到 HTML中的元素,这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。 说明:main......
    02-11
  • 实现HTML页面局部刷新的代码方法

    实现HTML页面局部刷新的代码方法

    本篇文章给大家介绍实现HTML页面局部刷新的代码方法。 事件响应刷新:有请求才会刷新 1、通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求; 2、通过Ajax将用户请求提交至服务器,服务器处理后......
    01-06
  • 详解4种html中position属性用法

    详解4种html中position属性用法

    本文给大家介绍4种html中position属性用法。 position的四个属性值: 1.relative 2.absolute 3.fixed 4.static 下面分别讲述这四个属性: div id=parent div id=sub1sub1/div div id=sub2sub2/div/div 1. relative relative属性相对比较......
    10-27
  • HTML实现双11抢劵(设定时间打开抢券的页面)的方法

    HTML实现双11抢劵(设定时间打开抢券的页面)的方法

    本篇文章给大家介绍HTML实现双11抢劵(设定时间打开抢券的页面)的方法 小编就直接给大家贴代码了,具体代码如下所示: !DOCTYPE htmlhtml lang=en xmlns=http://www.w3.org/1999/xhtmlhead meta charset=utf-8 / title/title style type=t......
    08-26

最新更新