在 UIWebView 中垂直和水平居中 HTML答案

【问题标题】：Vertically and horizontally center HTML in UIWebView在 UIWebView 中垂直和水平居中 HTML
【发布时间】：2012-06-08 13:52:06
【问题描述】：

我正在尝试将 UIWebView 中未知高度的内容垂直和水平居中。

我现在所拥有的在 Safari 中运行良好：

http://jsfiddle.net/HT9J5/

但是，它在 UIWebView 中呈现时看起来不正确：

任何想法如何让它发挥作用？我不能做的一件事是设置视口元，因为这需要在 iPad 上的模态视图控制器中呈现 UIWebView 时起作用，它不是屏幕的整个宽度：

<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1.0;"/>

【问题讨论】：

标签： html css ios uiwebview

【解决方案1】：

我尝试了您的示例，它在 UIWebView 中运行良好。我不知道您如何加载 HTML / CSS。您确定 CSS 已正确加载吗？你设置好 UIWebView 的框架了吗？

这是适合我的代码。我将 UIWeb 的框架设置为小于屏幕尺寸，因为您提到了以模态方式呈现它。

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSString *htmlString = @"<html><head><style type='text/css'>html,body {margin: 0;padding: 0;width: 100%;height: 100%;}html {display: table;}body {display: table-cell;vertical-align: middle;padding: 20px;text-align: center;-webkit-text-size-adjust: none;}</style></head><body><p><strong>Title</strong></p><p>A long explanation about what's going on and all that.</p><p><a href='#'>A link</a></p></body></html>";

    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(10.0, 10.0, 300.0, 400.0)];
    [self.view addSubview:webView];
    [webView loadHTMLString:htmlString baseURL:nil];

    [webView release];
}

【讨论】：

我现在觉得自己好蠢。问题是我没有在问题中分享的细节。我正在从包含 %@ 的文件中加载一个字符串，并使用 stringWithFormat 进行变量替换。这使 CSS 中的百分号消失了，产生了 100，而不是 100%。感谢您抽出宝贵时间重现此内容，非常感谢。
真的成功了，但是很慢？我们如何解决这个问题？
什么是慢？ HTML 的加载？