各种"居中"

最新推荐文章于 2019-05-20 22:42:23 发布
最新推荐文章于 2019-05-20 22:42:23 发布
阅读量397 收藏
点赞数
分类专栏： 前端 HTML 文章标签： 水平垂直居中 居中 CSS HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010758724/article/details/49330157
版权
前端 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
HTML
3 篇文章 0 订阅
订阅专栏

先看效果


代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<style type="text/css">*{font-family: 'Microsoft Yahei';font-size: 14px;}</style>
</head>

<body>
<!--单行文字居中-->
<p>1.单行文字居中</p>
<p>缺点：无法实现多行文字居中，适用于小元素如a,button,图标</p>
<style type="text/css">
	.single-text-center{width: 300px; height: 100px; line-height: 100px; background: #60bcd3; text-align: center;}
</style>
<div class="single-text-center">
	<div class="text">我希望这段文字居中显示</div>
</div>
<!-- 通过padding实现多行文字垂直居中 -->
<p>2.通过padding实现多行文字垂直居中</p>
<p>缺点：父容器不能固定高度</p>
<style type="text/css">
	.padding-center-parent{width: 300px; text-align: center; background: #60bcd3;}
	.padding-center-content{padding: 30px 0;}
</style>
<div class="padding-center-parent">
	<div class="padding-center-content">5.通过padding实现多行文字垂直居中,通过padding实现多行文字垂直居中,通过padding实现多行文字垂直居中,通过padding实现多行文字垂直居中</div>
</div>
<!--通过position:absolute;margin实现居中-->
<p>3.通过position:absolute;margin实现居中</p>
<p>缺点：宽高被固定死了，不能根据内容而变</p>
<style type="text/css">
	.position-center-parent{width: 300px; height: 300px; position: relative; background: #60bcd3; }
	.position-center-content{width: 200px; height: 200px; position: absolute; left: 50%; top:50%; margin-top: -100px; margin-left: -100px; background: #ff6700;}
</style>
<div class="position-center-parent">
	<div class="position-center-content"></div>
</div>
<!-- 通过浮动实现垂直居中，通过margin实现水平居中 -->
<p>4.通过浮动实现垂直居中，通过margin实现水平居中</p>
<p>缺点：宽高被固定死了，不能根据内容而变</p>
<style type="text/css">
	.floater-parent{height: 300px; width: 300px; background-color: #60bcd3;}
	.floater{height: 50%; float: left; margin-bottom:-100px; }
	.floater-content{height: 200px; width: 200px; margin:0 auto;  clear: both;  background-color: #ff6700;}
</style>
<div class="floater-parent">
<div class="floater"><!--无需内容--></div>
<div class="floater-content"></div>
</div>
<!-- 通过display:table-cell; vertical-align:middle; 实现居中 -->
<p>5.通过display:table-cell; vertical-align:middle; 实现垂直居中，通过定位实现水平居中</p>
<style type="text/css">
	.table-center-parent{width: 300px; height: 300px; display: table-cell; vertical-align:middle; position: relative; background: #60bcd3;}
	.table-center-content{width: 200px; position: absolute; left:50%; margin-left: -100px; background: #ff6700; display: inline-block; vertical-align:middle;}
</style>
<div class="table-center-parent">
	<span class="table-center-content">通过display:table; 实现宽高不固定元素垂直居中居中;通过display:table; 实现宽高不固定元素垂直居中居中;通过display:table; 实现宽高不固定元素垂直居中居中</span>
</div>

</body>
</html>


结论：css我目前还找不到一种解决方法可以实现水平垂直居中的同时，容器宽高又可以自适应内容。css3的flex弹性盒可以实现，但浏览器兼容又是一大硬伤...在这挖个坑，看以后能不能找到办法

Hisheng_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
KindEditor图片上传到七牛云
Hisheng
05-17 6405
自己做了一个网站，编辑器用的是KindEditor，平时会涉及到KindEditor自带的图片上传，但是服务器用的是虚拟主机，没多少空间，就一直想着把图片放在免费的云存储空间，之前看KindEditor的源码和七牛的SDK看得云里雾里的，网上搜索又没有类似的解决方法，只好继续看源码自己搞了，弄了整整一个晚上，基本实现了，下面说说我的做法： 版本说明： KindEditor版本：4x
CSS/CSS3 如何实现元素水平居中
Hisheng
10-22 3707
先上效果图 图中链接：inline-block元素之间存在空白间距 图中链接：Horizontally Centered Menus with no CSS hacks 实现代码： Horizontal CSS 如何实现元素水平居中 1.margin:auto实现水平居中 缺点：必须设置固定宽度 .margin-auto-parent{
DIV居中五种展示方法
qq_36801250的博客
05-20 2092
DIV居中五种展示方法 展示注意点 1).此方法适用于固定宽高的元素； 2).这些属性要作用在居中的的元素本身； 3).绝对定位要注意父级定位； 4).这些属性方在局中元素的父级元素上； 5).块级元素设置两个参数（height与line-height）会让块级元素内部的行级元素（该元素身上有vertical-align:middle属性）垂直水平居中（该方法会有些偏差）； 方法一 positio...
padding实现居中
热门推荐
lele的博客
10-16 1万+
* { margin: 0; padding: 0; } .f { width: 650px; height: 400px; background: yellow; /* 如何保持盒子整体大小不变，那么增加padding时，width,height对应减小 */ padd
css各种居中
snowstorm的博客
03-26 762
原文链接：http://www.cnblogs.com/2050/p/3392803.html 居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。 注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。 先来说几种简单的、人畜无
react native 各种居中
spfLinux的博客
01-31 1348
import React,{Component} from 'react'; import {View,Text} from 'react-native'; export default class Demo13Component extends Component{ render(){ return (
各种居中样式
12-20
压缩包内包含使用CSS实现各中完美垂直居中DEMO分享。 最终实测支持的浏览器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上对合适模型的补正。 推测支持的...
CSS各种居中布局方法汇总
09-24
主要针对CSS各种居中布局方法为大家进行详细汇总，感兴趣的小伙伴们可以参考一下
CSS的各种居中——如何书写高质量代码
12-13
CSS的居中有水平居中和垂直居中，这两种居中又分为行内元素居中和块级元素居中，不同的居中用不同方法。 水平居中 1、行内元素水平居中（文本，图片） 给父层设置 text-align:center; 可以实现行内元素水平居中。 ...
CSS布局奇淫技巧之--各种居中总结
09-24
居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，本篇文章主要介绍了CSS布局奇淫技巧之--各种居中，有兴趣的可以了解一下。
正则表达式验证邮箱格式
Hisheng
03-11 907
用于验证邮箱格式的正则表达式： /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.]){1,2}[A-Za-z\d]{2,5}$/
windows更新npm
Hisheng
05-27 650
今天遇到一个项目需要更新npm的版本，搜了一下如何更新npm的方法，有的人说直接重装node，npm版本就会是最新的，真是无力吐槽，要是每次更新都得这么麻烦还得了，我觉得一定有更好更简单的方法，最后果然在stackoverflow发现了一个很有用的方法，只需要简单的几步： windows上以管理员身份打开powershell，输入： Set-ExecutionPolicy Unrestrict
Scrapy使用心得
Hisheng
10-17 592
今天安装了大名鼎鼎的Scrapy，不过碰到了不少问题，包括“Unable to find vcvarsall.bat” 这个错误应该很常见的，用了最简单的解决方法: 安装visual 2008或者2010 其他的方法实在是太折腾了，幸好电脑上刚好有2010的安装包。 第二个问题是："Could not find a version that satisfies the requi
HTML--内联元素与块级元素
Hisheng
10-22 556
>>内联元素(inline element): a,span,input,select,label,img,textarea,sub,sup,li,i,small,strong,em,b,big... 内联元素没有独立的空间，是依附其他块级元素而存在的语义化元素，因此，对内联元素设置宽高，内外边距都是无效的。 >>块级元素(block element) div,table,ul,dl,ol
关于递增运算符
Hisheng
11-12 553
关于递增运算符[递减运算符也是一样的]有两点需要注意： #1 递增运算符返回值依赖于它与操作数之间的位置关系 如果操作数在前，如a++，则先返回a的值，再对a进行增一操作； 如果操作数在后，则先对操作数进行增一操作再返回操作数；例如，a=1，以下 b = (a++)+a 此时b为3 b = (++a)+a 此时b为4 #2 递增运算符不进行字符串连接操作，例如a++和a=a+1是不一样
函数和原型
Hisheng
11-12 550
在看这篇文章 《理解Javascript原型》 时，有几段话把我看得一头雾水，举的列子我也没太看明白 “每个函数都有一个原型属性。反过来，如果不是函数，将不会有这样一个属性。” “函数A的原型属性(prototype property )是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例” 于是自己在Chrome控制台测试了一下，总算能理解了
Javascript学习笔记
Hisheng
09-10 465
打算开始好好夯实自己的Javascript基础了，想成为一个合格的前端，这座大山不能无视。 在这里，我打算记录下自己学习中的要点和问题，称之为“学习笔记”。 买了一本圣经式的书——《Javascript权威指南》，好厚的书...不知道自己是不是真的有毅力能把这本书翻遍。 总之，且学着吧，有所收获就好。 分割线-----------------------------------------
CSS学习笔记
Hisheng
10-22 408
#1 设置了position: absolute; 的元素会变成块元素，并脱离普通文档流。
vue div上下居中
最新发布
08-10
- *3* [Vue css各种居中显示、固定在屏幕某个位置](https://blog.csdn.net/sinat_24918465/article/details/103288094)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值