-
HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
2017-08-11 18:25:02最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。 水平居中直接加上<center>标签即可，或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中...展开全文最近写网页经常需要将div在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。
水平居中直接加上<center>标签即可，或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中（水平居中+垂直居中）的方法
放上示范的html代码：<body> <div class="main"> <h1>MAIN</h1> </div> </body>- 方法一：
div使用绝对布局，设置
margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0。.main{ text-align: center; /*让div内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }效果如图：
- 方法二：
仍然是绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了，效果图和上方相同。
.main{ text-align: center; background-color: #fff; border-radius: 20px; width: 300px; height: 350px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }- 方法三：
对于水平居中，可以使用最简单的<center>标签，不过已经过时了，用法如下：
<p><center>123</center></p>这个
<center>标签就是相对于<p>标签里的文字，可以使其居中。由于center标签已经过时了，所以正规一点的话还是不建议使用的，可以使用如下的方式代替：
<p style="text-align:center;">123</p>
欢迎大家加入QQ群一起交流讨论， 「吟游」程序人生——YinyouPoet 
-
CSS中让DIV居中的代码
2020-12-13 10:08:26CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身...经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中! 郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模 -
RelativeLayout 代码控制居中
2015-02-12 11:10:48相对布局视图居中，代码控制 ProgressBar progressBar = new ProgressBar(mContext); RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(100, 100);// 这里改成DP值 layoutParams.add...展开全文相对布局视图居中，代码控制 ProgressBar progressBar = new ProgressBar(mContext); RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(100, 100);// 这里改成DP值 layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT); ((ViewGroup) mContainView).addView(progressBar, 0, layoutParams);
-
jquery图片居中放大代码
2021-04-09 16:41:44jquery图片居中放大代码是一款基于jquery实现的鼠标悬停图片居中放大展示代码。 -
div代码居中 上下居中 左右居中
2013-10-31 10:16:24精简后的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ; charset=gb2312" /> <title>Universal vertical ...展开全文<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Universal vertical center with css</title>
<style>
#outer {
height:300px;
width:300px;
overflow:hidden;
position:relative;
text-align:center;
}
#outer[id]{
display:table;
position:static;
}
#middle{
position:absolute;
top:50%;
}
/* for explorer only*/
#middle[id]{
display:table-cell;
vertical-align:middle;
position:static;
}
#inner{
position:relative;
top:50%;
}
/* for explorer only*/
/* optional : #inner[id] {position:static}*/
.withBorder{
border:1px green solid;
}
</style>
</head>
<body>
<div id="outer" class="withBorder">
<div id="middle">
<div id="inner">
<img src="http://blog.163.com/lixiaofengfly@126/blog/image/guest_test_icon2.jpg"/>
<!-- any text any height any content,
everthing is vertically centered.
或者文字也可以
只需要设置 outer 的 高度 宽度 就可以得到想要的效果了
其他... 复制！
-->
</div>
</div>
</div>
</body>
</html>
精简后的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Universal vertical center with css</title>
<style>
#outer {
height:300px;
width:300px;
display:table-cell;
vertical-align:middle;/*火狐，chrom垂直居中*/
line-height:300px; /*IE7垂直居中*/
text-align:center; /*水平居中*/
}
.withBorder{
border:1px green solid;
}
</style>
</head>
<body>
<div id="outer" class="withBorder">
<img src="http://blog.163.com/lixiaofengfly@126/blog/image/guest_test_icon2.jpg"/>
</div>
</body>
</html>
-
div居中代码 DIV水平居中显示CSS代码
2015-04-27 09:19:31需要的主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0 auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。 首先我们对body设置text-align:center，再对需要居中的div...展开全文
-
网页上的点击弹出层代码，居中显示
2013-08-09 09:18:18网页上的点击弹出层代码，居中显示 点击弹出居中的遮罩层代码 -
html文字段落居中代码,html里文字居中代码怎么写？
2021-06-09 02:19:49详细内容html里文字居中代码怎么写？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。文字水平居中水平居中.box {width: 300px;height: 200px;background: ... -
在代码中设置某控件居中
2016-01-22 19:37:55因项目需求，布局是动态的，没法在Xml中写死，但是，写的过程中发现某些Xml中的属性在代码中无法配置，比如我想让某一控件居中显示时可以用： RelativeLayout.LayoutParams params=new LayoutParams(LayoutParams.... -
代码实现控件水平居中
2020-05-18 11:01:55简单代码实现控件水平居中，里面有详细备注说明 -
单元格图片自动居中代码
2018-04-04 21:08:24excel中单元格所有图片自动居中代码。谢谢各位观众老爷的路过 -
html整体居中文字,html文字居中 html图片居中代码
2021-06-08 18:48:21html图片居中方法代码，通过在html中实现文字居中图片居中篇�?a href="//www.css5.com.cn/html/">html中实现文字图片内容居中有三种方法，其中两种使�?a href="//www.css5.com.cn/">CSS样式实现，一直使用... -
Spinner在代码中设置文字居中
2018-09-27 11:28:52如果ArrayAdapter使用了simple_spinner_item.xml布局 ArrayAdapter&lt;String&gt; dataAdapter = new ArrayAdapter&...(this, android.R.layout.simple_spinner_item, data) { ... -
在html中如何使div在页面中居中显示
2019-02-28 13:40:41在html中如何使div在页面中居中显示 最近无聊中又再温习了下html,发现好多东西都忘了。尝试着写了一个html网页，结果就连div如何在页面中居中显示都查了好久才弄出来。其实我不知道为什么这样可以实现，因为css还没... -
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2021-01-21 11:10:32作为一个前端小猴子，不管是面试的时候还是工作中，我们都会或多或少的遇到“使用css居中”的效果，今天就写一篇关于css垂直水平居中的几种方法。 栗子1：从最简单的水平居中开始 margin: 0 auto; 块级元素使用... -
css 水平居中，垂直居中，自适应宽度的代码
2020-12-13 16:11:00上图中：黑色为body，深绿色需要在body中水平居中，并且宽度是自适应的。亮绿色，是一个多余的DIV，就是为了让深绿色的DIV水平居中。 以下是实现代码： pos元素的float:left或都用position:absolute;都可以... -
壁纸居中代码
2014-12-16 15:37:52小米手机的修改方式 -
DIV始终居中的js代码
2020-10-26 06:49:47主要介绍了DIV始终居中的js代码,需要的朋友可以参考下 -
jquery实现垂直居中显示特效代码
2021-01-23 05:18:14jquery实现垂直居中显示特效代码 -
div层居中代码下载
2008-11-05 16:34:23如何让DIV居中，这里有源代码。 许多朋友都不清楚DIV如何让它居中，其实很简单！ 如果是对页面所有DIV居中，就写在BODY的CSS中; 如果是针对特定的DIV，就写在该DIV的CSS中 -
js 页面左右两侧居中广告代码
2020-10-28 03:14:45js 页面左右两侧居中广告代码,里面的代码还不错 -
div整体居中其内容不居中的示例代码
2020-09-25 04:38:44有时我们会有这样的需求就是让div整体居中且内容不居中，下面有个不错的示例，大家可以参考下 -
android在代码中怎么使得控件居中,以及代码设置控件selector
2016-07-25 16:36:13分别是登录前的状态，和登录后的状态，LinearLayout背景颜色和高度需要改变，LinearLayout布局中的TextView字体需要改变，ImageView控件要改变，原来是居中显示的，那么改变控件后，还想要居中，只需要在xml中设置... -
jquery图片居中放大特效代码
2021-03-20 04:14:27jquery图片居中放大代码是一款基于jquery实现的鼠标悬停图片居中放大展示代码。 -
DIV居中(水平居中及垂直居中)实现代码
2019-05-16 16:32:28代码: <html> <head> <style type="text/css"> /*页面通用样式*/ body { background:#fff; } /*div 水平居中*/ .div1{ margin:0 auto; text-align:center; height:80px; width:500px; ... -
sublime下让代码居中
2017-03-19 21:15:00sublime在默认情况下当屏幕写满后只能在底端进行输入，对于我这种强迫症患者来说总想着让代码居中显示，在自己查阅相关sublime配置后进行改动。 点击：preference → setting，进入设置界面： 设置界面都是以代码... -
垂直居中对齐的CSS示例代码
2020-12-13 09:33:01垂直居中对齐的核心代码如下： 复制代码代码如下: .elment{ position:relative; top:50%; transform:translateY(-50%); } 具体参见如下案例，利用less将居中对齐的代码携程mixins。 html 复制代码代码如下: ”... -
div中的文字居中代码
2012-12-26 16:22:31<!-- #center {text-align:center; vertical-align:middle; height:200px; line-height:200px; width:400px; border:#000000 dotted 1px} ... 居中 #center{ text-align:center; -
登录页面居中示例代码
2018-08-16 17:31:42登录页面居中示例代码 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&...
收藏数
200,499
精华内容
80,199