带转换的中心绝对块：translate（-50％，-50％）方式问题
[英]Center absolute block with transform: translate(-50%, -50%) way issue
问题描述
Here is my example: 
这是我的示例：
body { padding: 50px; } div { width: 240px; height: 150px; border: 1px solid #ccc; position: relative; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <a href="">Lorem ipsum dolor sit.</a> </div> </body> </html>
I would like to center my absolute positioned text in block using left: 50%; top: 50%; transform: translate(-50%, -50%); 我想将绝对定位的文本居中使用left: 50%; top: 50%; transform: translate(-50%, -50%); left: 50%; top: 50%; transform: translate(-50%, -50%); , but my text have line break. ，但我的文字有换行符。 Obviously, my block has enough space to place in one line the text. 显然，我的块有足够的空间将文本放在一行中。 I'm not sure, but may be there is a way to solve this problem? 我不确定，但是也许有办法解决这个问题吗？
3 个解决方案
解决方案1
2 2017-10-07 22:27:12
Try to add 尝试添加
a { white-space: nowrap; }
It should keep it as 1 line. 它应该保持为1行。
Also you could get rid of all this positioning: just a {line-height: 150px;} and add text-align: center; 您也可以摆脱所有这些定位：只需a {line-height: 150px;}并添加text-align: center; to div: 转到div：
body { padding: 50px; } div { width: 240px; height: 150px; border: 1px solid #ccc; text-align: center; } a { line-height: 150px; }
<div> <a href="">Lorem ipsum dolor sit.</a> </div>
解决方案2
1 已采纳 2017-10-07 22:47:01
The left: 50% causes the a element to have only 50% width, ie 50% of the parent element, since it starts in the middle and extends to the right border. 在left: 50%会导致a元素只有50％的宽度，即父元素的50％，因为它开始在中间，并延伸到右边框。 So its contents wrap in your case, since they won't fit into 50% width. 因此，它的内容适合您的情况，因为它们不能适合50％的宽度。
I would suggest an alternative solution where flexbox does the centering (actually results in less CSS): 我会建议一个替代解决方案，其中flexbox进行居中（实际上会减少CSS）：
body { padding: 50px; } div { width: 240px; height: 150px; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <a href="">Lorem ipsum dolor sit.</a> </div> </body> </html>
解决方案3
0 2017-10-07 22:35:00
You can use CSS flexbox module for that. 您可以为此使用CSS flexbox模块。 All you need is to set the containing element to display: flex and use align-items and justify-content properties to set the alignment of the content. 您所需要做的就是将包含元素设置为display: flex并使用align-items和justify-content属性设置justify-content的对齐方式。 The a element in this case doesn't need any special styling. 在这种情况下， a元素不需要任何特殊样式。 Here's a nice flexbox guide . 这是一个不错的flexbox指南 。
body { padding: 50px; } div { display: flex; align-items: center; justify-content: center; width: 240px; height: 150px; padding: 1em; border: 1px solid #ccc; position: relative; }
<body> <div> <a href="#">The content is centered in the flex box no matter how many lines of text you have.</a> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.