方法一:对div使用绝对布局position:absolute并设置top,left,right,bottom的值相等,但不一定都等于0;并且设置margin:auto。
方法二:这个方法要知道div的宽度和高度。对div使用绝对布局position:absolute并把top和left的值都设置为50%;50%就是指页面窗口的宽度和高度的50%;最后将div左移和上移,左移和上移的大小为div宽度和高度的一半。
其中 margin-left:-100px 和 margin-top:-100px 可以写成 margin:-100px 0px 0px -100px
方法三:div使用绝对定位position:absolute,并且设置left和top的值都为50%。使用css3的transform属性。transform:translate(-50%,-50%)。
以上3种方法的效果如下显示
若有两个div,里面小的div相对于外面大的div水平垂直居中对齐,有以下几种方法。
方法一:利用position和margin:auto实现。父元素设置position:relative;子元素设置position:absolute,并设置top,left,right,bottom值相等。
方法二:使用position。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%,并设置左移和上移为子元素的大小的一半。
方法三:使用display:flex。这种方法需要设置浏览器的兼容性。
方法四:使用transform:translate()。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%。最后设置transform:translate(-50%,-50%)。
以上四种方法的效果图如下显示
今天就跟大家分享这么多~如果你有更好的方法,请在下方留言
1、首先先进行文本框的插入,在word文档编辑界面上,单击上方工具栏中的“插入”按钮,包括文本框,所有的插入选项都在这里。
2、在“插入”选项的下拉工具栏中,选择如图所示“文本框”图标单击。
3、接下来会弹出文本框样式的选择框,在里面可以根据需要选择文本框样式。这里以简单文本框为例,单击选择框中的”简单文本框“。
4、在文档编辑区出现的如图所示文本框中,将原有的选择文字删去就可以编辑文字了。
5、编辑好文字后,选中刚才编辑的文字。接下来进行的是对于文字居中了。
6、单击上方工具栏中的“开始”选项,会出现下拉工具栏。关于文本的设置就在这里。
7、在“开始”选项的下拉工具栏中,“段落”设置中的“居中”设置。
8、至此设置完毕,可看到文本框中选中的文字已经在文本框中央,单击任意空白处取消选中即可。
9、完成效果如下。
CSS就可以,这是JQuery的一款著名提示插件blockUI的实现原理。官方网站示例:http://malsup.com/jquery/block/#demos
楼主有兴趣可以慢慢研究其源代码,不是很难。
css: {
padding:0,
margin: 0,
width: '30%',
position: fixed,
top:'40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait',
opacity: '0.8'
},